menu
Menu
Mobify DevCenter
search_icon_focus

Image

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.

JavaScript import

import Image from 'progressive-web-sdk/dist/components/image'

SCSS import

@import 'node_modules/progressive-web-sdk/dist/components/image/base';

Props table

Name & DescriptionTypeDefault
alt
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.

numbernone
className
A CSS class name to be applied to the element.
stringnone
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.
boolnone
imageStyle
Inline styles for the img component.
object{}
itemProp

A value for the itemprop attribute used to provide microdata to a page for SEO https://www.w3.org/TR/microdata/

stringnone
lazyLoadThreshold

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

number0
loadingIndicator
Additional content to show with the placeholder while the image loads.
nodenone
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'}

objectnone
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

boolfalse
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

arraynone
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

arraynone
useLoaderDuringTransitions
Indicates whether to display the loaderNode or the old image when src is changed (while the new image loads)
booltrue
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.
funcnone
onImageLoaded
A callback that gets called when the image is loaded and displayed.
func() => undefined

Basic example

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark
Mobify Logo

With the srcSet prop

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark
Cats!

With useLoaderDuringTransitions

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

With inline styles

Please note that the width property is overridden by the imageStyle.width.

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark