Image

The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props. Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` 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 `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.

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"
    />
  );
}

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"
    />
  );
}

Props

HydrogenImageBaseProps

aspectRatio

The aspect ratio of the image, in the format of `width/height`.

crop

The crop position of the image.

data

Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-07/objects/Image) object. Must be an Image object.

loader

A function that returns a URL string for an image.

srcSetOptions

An optional prop you can use to change the default srcSet generation behaviour

loaderOptions

widths

Crop

'center' | 'top' | 'bottom' | 'left' | 'right'

Loader

Returns: string

Params:

params: LoaderParams

export type Loader = (params: LoaderParams) => string;

LoaderParams

src

The base URL of the image

width

The URL param that controls width

height

The URL param that controls height

crop

The URL param that controls the cropping region

SrcSetOptions

intervals

The number of sizes to generate

startingWidth

The smallest image size

incrementSize

The increment by which to increase for each size, in pixels

placeholderWidth

The size used for placeholder fallback images

ShopifyLoaderOptions

Legacy type for backwards compatibility *

src

The base URL of the image

width

The URL param that controls width

height

The URL param that controls height

crop

The URL param that controls the cropping region

Related

• MediaFile