---
title: Image
description: >-
  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.


  An image's width and height are determined using the following priority list:

  1. The width and height values for the `loaderOptions` prop

  2. The width and height values for bare props

  3. The width and height values for the `data` prop


  If only one of `width` or `height` are defined, then the other will attempt to
  be calculated based on the image's aspect ratio,

  provided that both `data.width` and `data.height` are available. If
  `data.width` and `data.height` aren't available, then the aspect ratio cannot
  be determined and the missing value will remain as `null`
api_version: 2023-01
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/2023-01/components/image'
  md: 'https://shopify.dev/docs/api/hydrogen-react/2023-01/components/image.md'
---

# 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.

An image's width and height are determined using the following priority list:

1. The width and height values for the `loaderOptions` prop
2. The width and height values for bare props
3. The width and height values for the `data` prop

If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio, provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing value will remain as `null`

## Props

* data

  PartialObjectDeep\<Image, { recurseIntoArrays: true; }>

  required

  An object with fields that correspond to the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image). The `data` prop is required.

* loader

  (params: { crop?: "center" | "top" | "bottom" | "left" | "right"; scale?: 2 | 3; width?: string | number; height?: string | number; src: string; }) => string

  A custom function that generates the image URL. Parameters passed in are `ShopifyLoaderParams`

* loaderOptions

  ShopifyLoaderOptions

  An object of `loader` function options. For example, if the `loader` function requires a `scale` option, then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.

* src

  never

  `src` isn't used, and should instead be passed as part of the `data` object

* widths

  (string | number)\[]

  An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.

### ShopifyLoaderOptions

* crop

  ```ts
  "center" | "top" | "bottom" | "left" | "right"
  ```

* scale

  ```ts
  2 | 3
  ```

* width

  ```ts
  string | number
  ```

* height

  ```ts
  string | number
  ```

```ts
{
  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
  scale?: 2 | 3;
  width?: HtmlImageProps['width'] | ImageType['width'];
  height?: HtmlImageProps['height'] | ImageType['height'];
}
```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {Image} from '@shopify/hydrogen-react';

  export default function ProductImage({product}) {
    const image = product.featuredImage;

    if (!image) {
      return null;
    }

    return <Image data={image} />;
  }
  ```

  ##### TypeScript

  ```tsx
  import {Image} from '@shopify/hydrogen-react';
  import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

  export default function ProductImage({product}: {product: Product}) {
    const image = product.featuredImage;

    if (!image) {
      return null;
    }

    return <Image data={image} />;
  }
  ```

## Related

[- MediaFile](https://shopify.dev/api/hydrogen-react/components/mediafile)