import Image from 'react-storefront/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.
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 |
optimize | shape : | {} | When specified, the image will be optimized for mobile devices by the Moovweb CDN. Accepts the following keys:
|
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