---
title: Image
description: >-
  An optimized image component that handles File objects, remote URLs, blob URL
  lifecycle management, and progressive loading with thumbhash placeholders.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/image'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/image.md'
---

# Image

An optimized image component that handles File objects, remote URLs, blob URL lifecycle management, and progressive loading with thumbhash placeholders. Ideal for displaying images from useImagePicker or any remote source.

#### Props

* **alt**

  **string**

  Alt text for accessibility

* **aspectRatio**

  **number | string**

  Aspect ratio (e.g., 16/9, "4/3", or "auto")

* **file**

  **File**

  File object from useImagePicker (auto-manages blob URL lifecycle)

* **objectFit**

  **'cover' | 'contain' | 'fill' | 'scale-down' | 'none'**

  How the image should fit within its container

* **onLoad**

  **() => void**

  Callback when image finishes loading

* **src**

  **string**

  Remote image URL

* **thumbhash**

  **string | null**

  Thumbhash string for progressive loading placeholder

Examples

## Preview

![image](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Image-C9beFiEF.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'

  import {Image} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Image
        src="https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center"
        alt="The Hero Snowboard"
        thumbhash="NwgGBQD3qIt2+EkWqHqGV4tgd0EH"
        aspectRatio={1}
      />
    )
  }
  ```

* ####

  ##### Description

  Display a remote image with automatic resizing

  ##### tsx

  ```tsx
  import React from 'react'

  import {Image} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Image
        src="https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center"
        alt="The Hero Snowboard"
        thumbhash="NwgGBQD3qIt2+EkWqHqGV4tgd0EH"
        aspectRatio={1}
      />
    )
  }
  ```

* ####

  ##### Description

  Display a File from useImagePicker with automatic blob URL management

  ##### tsx

  ```tsx
  import {useState} from 'react'
  import {Image, useImagePicker, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {openGallery} = useImagePicker()
    const [imageFile, setImageFile] = useState<File | null>(null)

    const handleSelectImage = async () => {
      try {
        const file = await openGallery()
        setImageFile(file)
      } catch (error) {
        console.error('Failed to select image:', error)
      }
    }

    return (
      <>
        <Button onClick={handleSelectImage}>Select Image</Button>

        {imageFile && (
          <Image
            file={imageFile}
            alt="Selected image"
            className="w-full mt-4 rounded-lg"
          />
        )}
      </>
    )
  }
  ```

* ####

  ##### Description

  Progressive loading with thumbhash placeholder

  ##### tsx

  ```tsx
  import {Image} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Image
        src="https://cdn.shopify.com/example/large-image.jpg"
        thumbhash="HBkSHYSIeHiPiHh8eJd4eTN0D3"
        alt="Product with placeholder"
        className="w-full rounded-lg"
        onLoad={() => console.log('Image loaded')}
      />
    )
  }
  ```

* ####

  ##### Description

  Custom aspect ratio and styling

  ##### tsx

  ```tsx
  import {Image} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="grid grid-cols-2 gap-4">
        {/* Square aspect ratio */}
        <Image
          src="https://cdn.shopify.com/example/product1.jpg"
          alt="Square image"
          aspectRatio={1}
          className="rounded-lg shadow-lg"
        />

        {/* 16:9 aspect ratio */}
        <Image
          src="https://cdn.shopify.com/example/product2.jpg"
          alt="Wide image"
          aspectRatio="16/9"
          className="rounded-lg shadow-lg"
        />

        {/* Portrait aspect ratio */}
        <Image
          src="https://cdn.shopify.com/example/product3.jpg"
          alt="Portrait image"
          aspectRatio="3/4"
          className="rounded-lg shadow-lg"
        />

        {/* Auto aspect ratio (default) */}
        <Image
          src="https://cdn.shopify.com/example/product4.jpg"
          alt="Auto aspect image"
          className="rounded-lg shadow-lg"
        />
      </div>
    )
  }
  ```

***