Image
An image component with with optiional lazy-loading, spinner, placeholder with aspect ratio, and background option as well as retina support.
Basic usage
<Image src="https://example.com/example.jpg" />Props
| Props | Type | Description | Required | Default |
|---|---|---|---|---|
src |
string |
Image source url | ✔︎ | null |
retinaSrc |
string |
Retina image source url | null |
|
aspectRatio |
array [width, height] |
Aspect ratio for placeholder shown before image has loaded | null |
|
displayAsBackground |
boolean |
Display image as background | false |
|
loader |
string |
Set if a loading indicator should be shown during load (for now only "spinner" is available) | null |
|
placeholderBackground |
string |
Custom background color of the placeholder | null |
|
onLoad |
func |
Callback fired when image finish loading | null |
|
extend |
object |
Extend styles of image | null |
|
extendContainer |
object |
Extend styles of image container element | null |
|
disableFader |
boolean |
Disable fade-in transition when image is loaded | false |
|
disableLoading |
boolean |
Disable lazy-loading and load image as usual | false |
|
errorText |
string |
Message shown when loading image results in an error | null |
|
fallbackQueryParameter |
string |
Query parameter to append to image url and retry on error | null |
|
alt |
string |
null |
||
lazyload |
boolean |
false |