Image

Provide amp-compatible mobile-optimized images that can be made to auto-scale to fit the parent element by setting the fill prop, or grow/shrink while maintaining a given aspect ratio by setting the aspectRatio prop.

Import
import Image from 'react-storefront/Image'

Props

NameTypeDefaultDescription
aspectRationumber

The ratio of height/width as a float. For example: 1 when the height and width match, 0.5 when height is half of the width.

qualitynumbernull

The quality of image to retreive from 0 to 100

containboolfalse

Set to true to apply object-fit:contain to the image so that it automatically fits within the element's height and width.

fillboolfalse

The same as contain, except images are stretched to fill the element's height and width.

lazyboolfalse

Set to true to wait until the image enters the viewport before loading it.

lazyOffsetnumber100

Sets the minimum amount of pixels the image can be scrolled out of view before it is lazy loaded. Defaults to 100. You must set lazy in order for this setting to take effect.

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • fit
  • contain
  • fill