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 |