MediaLazyImage

An image that loads late and asynchronously, with a placeholder, a fallback and an error state.

import { MediaLazyImage } from '@zairakai/vue-components/Medias'

Usage

<MediaLazyImage src="…" alt="…" />

Props

Name	Type	Default	Description
id	string
class	string
src	string	required
alt	string	required
srcset	string
sizes	string
width	string|number		Giving the size avoids the page jumping when the image arrives.
height	string|number
eager	boolean	false	Load now instead of when it comes near the screen (the first image of a page).
fallback	string		The image shown if the real one fails.
fit	string	'cover'

Events

Name	Description
load
error

Slots

Name	Description
placeholder
error

See Theming for the class hooks and the data-* state of the components.