Imagecomponent
The Image component renders an image for the Storefront API's
Image object by using the data prop. You can customize this component using passthrough props.
Images default to being responsive automatically (width: 100%, height: auto), and expect an prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set width to an exact value, and a with 1x, 2x, and 3x DPI variants will automatically be generated for you.
Anchor to propsProps
- Anchor to aspectRatioaspectRatiostring
The aspect ratio of the image, in the format of
.- Anchor to cropcropCropDefault: `center`
The crop position of the image.
- Anchor to datadataPartialDeep<ImageType, {recurseIntoArrays: true}>
Data mapping to the Storefront API
Imageobject. Must be an Image object.- Anchor to loaderloaderLoader
A function that returns a URL string for an image.
- Anchor to srcSetOptionssrcSetOptionsSrcSetOptions
An optional prop you can use to change the default srcSet generation behaviour
Crop
'center' | 'top' | 'bottom' | 'left' | 'right'Loader
- params
LoaderParams
stringexport type Loader = (params: LoaderParams) => string;LoaderParams
- crop
The URL param that controls the cropping region
Crop - height
The URL param that controls height
number - src
The base URL of the image
string - width
The URL param that controls width
number
{
/** The base URL of the image */
src?: ImageType['url'];
/** The URL param that controls width */
width?: number;
/** The URL param that controls height */
height?: number;
/** The URL param that controls the cropping region */
crop?: Crop;
}SrcSetOptions
- incrementSize
The increment by which to increase for each size, in pixels
number - intervals
The number of sizes to generate
number - placeholderWidth
The size used for placeholder fallback images
number - startingWidth
The smallest image size
number
{
/** The number of sizes to generate */
intervals: number;
/** The smallest image size */
startingWidth: number;
/** The increment by which to increase for each size, in pixels */
incrementSize: number;
/** The size used for placeholder fallback images */
placeholderWidth: number;
}Example code
Examples
Example code
Description
I am the default example
JavaScript
import {Image} from '@shopify/hydrogen'; // An example query const IMAGE_QUERY = `#graphql query { product { featuredImage { altText url height width } } } `; export default function ProductImage({product}) { if (!product.featuredImage) { return null; } return ( <Image data={product.featuredImage} sizes="(min-width: 45em) 50vw, 100vw" aspectRatio="4/5" /> ); }TypeScript
import React from 'react'; import {Image} from '@shopify/hydrogen'; import type {Product} from '@shopify/hydrogen/storefront-api-types'; // An example query const IMAGE_QUERY = `#graphql query { product { featuredImage { altText url height width } } } `; export default function ProductImage({product}: {product: Product}) { if (!product.featuredImage) { return null; } return ( <Image data={product.featuredImage} sizes="(min-width: 45em) 50vw, 100vw" aspectRatio="4/5" /> ); }
