Image
The Image component renders an image for the Storefront API's
Image object.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| data | PartialDeep<ImageType> |
An object with fields that correspond to the Storefront API's Image object. The data prop is required if src isn't used, but both props shouldn't be used at the same time. If both src and data are passed, then data takes priority. |
| src | string |
A URL string. This string can be an absolute path or a relative path depending on the loader. The src prop is required if data isn't used, but both props shouldn't be used at the same time. If both src and data are passed, then data takes priority. |
| width | number |
string |
| height | height |
string |
| loader? | (props: ShopifyLoaderParams \ |
LoaderOptions) => string |
| loaderOptions? | ShopifyLoaderOptions \ |
LoaderOptions |
Component type
Anchor link to section titled "Component type"The Image component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.
Storefront API data
Anchor link to section titled "Storefront API data"The data prop is an object with fields that correspond to the Storefront API's Image object:
Image size options
Anchor link to section titled "Image size options"You can change the size and format of the image returned by the Shopify CDN.
| Key | Description |
|---|---|
width |
A string of the pixel width (for example, 100px) or original for the original width of the image. |
height |
A string of the pixel height (for example, 100px) or original for the original height of the image. |
crop |
Valid values: top, bottom, left, right, or center. |
scale |
Valid values: 2 or 3. |