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.
This attribute defines the alternative text describing the image.
string
''
src
This is the image URL.
string
''
artificialLoadingDelay
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.
number
none
className
A CSS class name to be applied to the element.
string
none
draggable
Used to determine if the image should be draggable.
string
'auto'
height
The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
string
'auto'
hidePlaceholder
Used to determine if the image placeholder should be shown while the image loads.
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
number
0
loadingIndicator
Additional content to show with the placeholder while the image loads.
node
none
placeholderStyle
An object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.
object
{}
ratio
Props for a Ratio component. See the Ratio component for more details.
Example: {aspect: '4:3'}
object
none
shouldLazyLoad
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
bool
false
sizes
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
array
none
srcSet
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
array
none
useLoaderDuringTransitions
Indicates whether to display the loaderNode or the old image when src is changed (while the new image loads)
bool
true
width
The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
string
'100%'
wrapperStyle
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.
object
{}
onImageError
A callback that gets called when the image is failed to load.
func
none
onImageLoaded
A callback that gets called when the image is loaded and displayed.