@volvo-cars/image-component NPM

Image

An image component with with optiional lazy-loading, spinner, placeholder with aspect ratio, and background option as well as retina support.

<Image src="https://example.com/example.jpg" />

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`