React SDK

Image

The Image component is used to display images with added options for cropping.

Import

Usage

Editable Example
Unplash photo

Force an aspect ratio

This is useful if you want to crop the image or you don't know the dimensions of an image.

Editable Example
Unplash photo

Change image on hover

You can also provide an additional image under hoverSrc to change image on hover.

Editable Example
Unplash photoUnplash photo

Props

NameTypeDefaultDescription
srcstringThe path to the image source.
hoverSrcstringThe additional image to show when hovering.
altstringThe alt text that describes the image.
onLoadfunctionA callback for when the image src has been loaded.
onErrorfunctionA callback for when there was an error loading the image src.
htmlWidthstring | numberThe native HTML width attribute of the img element.
htmlHeightstring | numberThe native HTML height attribute of the img element.
aspectRatioAspectRatioProps['ratio']Force the image to render at a certain aspect ratio.
objectFit'contain' | 'cover' | 'fill' | 'scale-down' | 'none'Force the image to render at a certain aspect ratio.
provider'shopify' | undefinedEnable image sizing.