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 Image from 'react-storefront/Image'| Name | Type | Default | Description |
|---|---|---|---|
| notFoundSrc | string | The URL of the image to use in case the primary image fails to load | |
| aspectRatio | number | 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. | |
| quality | number | null | The quality of image to retreive from 0 to 100 |
| contain | bool | false | Set to true to apply object-fit:contain to the image so that it automatically fits within the element's height and width. |
| fill | bool | false | The same as contain, except images are stretched to fill the element's height and width. |
| lazy | bool | false | Set to true to wait until the image enters the viewport before loading it. |
| lazyOffset | number | 100 | 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 |
You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:
rootfitcontainfill