Image

Use Image to display visual content like product photos and illustrations. When you pass params, it generates a responsive srcset from the source URL, and it adds a loaded class once the image finishes loading.

Import

import { Image } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
src	string	Yes	Image URL.
params	ResolveImageUrlOptions	No	Parameters appended to the image URL to generate a responsive srcset.
sizes	string	No	The sizes attribute for responsive images.
onLoad	(e: any) => void	No	Callback fired when the image finishes loading.

Image also accepts standard image HTML attributes (for example, alt, width, height, and loading, which defaults to lazy).

Example

Render a product’s gallery image with explicit dimensions and a responsive srcset:

import { Image, provider } from '@dropins/tools/components.js';

await provider.render(Image, {
  src: yourProduct.images[0].url,
  alt: yourProduct.images[0].label,
  width: 400,
  height: 400,
  // Generates a responsive srcset from the source URL.
  params: { width: 400, height: 400 },
})(yourElement);

Related

• Image Swatch — a selectable, image-based option built on Image.
• Content Grid — lay out images in a responsive grid.