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.

Anchor to propsProps

Anchor to alt alt string: Alt text for accessibility
Anchor to aspectRatio aspectRatio number | string: Aspect ratio (e.g., 16/9, "4/3", or "auto")
Anchor to file file File: File object from useImagePicker (auto-manages blob URL lifecycle)
Anchor to objectFit objectFit 'cover' | 'contain' | 'fill' | 'scale-down' | 'none': How the image should fit within its container
Anchor to onLoad onLoad () => void: Callback when image finishes loading
Anchor to src src string: Remote image URL
Anchor to thumbhash thumbhash string | null: Thumbhash string for progressive loading placeholder

Examples

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}

)

}

Preview

Examples

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

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

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

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

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>
  )
}

Was this page helpful?