Image

This is a replacement for the <img /> and <figure /> tags. The idea is to have an image placeholder which will show the image when loaded and an optional caption.

<Image animate resources='/static/img/wallpaper.jpg'>
    The vast universe around us
</Image>

Providing resources according to viewport:

<Image animate resources={{
    small: '/static/img/small.jpg',
    medium: '/static/img/medium.jpg',
    large: '/static/img/large.jpg',
    xlarge: '/static/img/xlarge.jpg'
}}>
    The vast universe around us
</Image>

Prop name	Type	Default	Description
Animation	any	`AnimationComponent`
Frame	any	`FrameComponent`
Loading	any	`LoadingComponent`
createLoader	any	`createLoaderModule`
createResponsive	any	`createResponsiveModule`
theme	any	Required
classes	any	Required
animate	bool
show	bool	`true`
animation	object
layer	enum	`'primary'`	One of: `'primary'`, `'secondary'`, `'header'`, `'control'`, `'success'`, `'alert'`, `'disabled'`
loadResources	bool	`true`	If the resources should be loaded.
resources	union	Required	The image resource or the images resources according to device viewport. One of type: `string`, `shape`
i18n	shape	`{ error: 'Image error', }`	i18n messages. `error`: `string`
imgProps	object	`{}`	Props to pass down to the `<img />` element.
children	any		If function, receives the animation status object.

Method name	Parameters	Description
getDefaultState
loadResource		If enabled, load the resources provided. It doesn’t return the state of the loading, it will update the state.

Source code: src/Image Open in: Playground