An image component with placeholder functionality using the SkeletonBlock component.
Note: Placeholder functionality is not supported in Internet Explorer (IE) 11. This is due to a bug in how IE11 handles the
onload event for images. For all other browsers, the
Image component must have an explicit height for the placeholder to appear.
import Image from 'progressive-web-sdk/dist/components/image'
|Name & Description||Type||Default|
This attribute defines the alternative text describing the image.
This is the image URL.
This attribute defines an artificial delay (ms) that slows down when the image is considered loaded. Note that this prop only works if the image is not included in the initial server-side rendering of the page.
A CSS class name to be applied to the element.
Used to determine if the image should be draggable.
The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
Used to determine if the image placeholder should be shown while the image loads.
Inline styles for the img component.
A value for the itemprop attribute used to provide microdata to a page for SEO https://www.w3.org/TR/microdata/
If shouldLazyLoad is set to true, this number defines how close (in pixels) to the bounds of the viewport the image should be before we start loading it Example: If set to 200 the image will begin loading when it is within 200 pixels of the browser viewport
Additional content to show with the placeholder while the image loads.
An object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.
Props for a Ratio component. See the Ratio component for more details.
Indicates if the image should be lazy loaded If true the image will only start loading when it is onscreen or close to being on screen within the lazyLoadThreshold value Example: with a lazyLoadThreshold value of 200, images will begin loading while offscreen if they are within 200px of being on screen
An array of one or more strings indicating a set of source sizes. Each string is composed of: 1. A media condition that may be omitted for the last item. 2. A source size value See http://mdn.io/img
An array of one or more strings indicating a set of image sources. Each string is composed of: 1. A URL to an image. 2. (Optionally, after a space) A width or pixel density descriptor. If no srcSet matches, the browser will default to using the src prop See http://mdn.io/img
Indicates whether to display the loaderNode or the old image when src is changed (while the new image loads)
The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
Inline styles for the div component that wraps the img component. Styles related to 'position' should be added to the wrapperStyle instead of the imageStyle, otherwise they may not work as expected.
A callback that gets called when the image is failed to load.
A callback that gets called when the image is loaded and displayed.
|func||() => undefined|
With the srcSet prop
With inline styles
Please note that the
width property is overridden by the