Blur Image
Image with low-quality image placeholder (LQIP) blur-up effect. Shows a tiny blurred preview while the full image loads, then crossfades in.
Default
Pass src plus a base64 lqip data URL for the blur effect.
Without LQIP
Without lqip, falls back to a shimmer skeleton while loading.
API Reference
Props, events, and slots for each sub-component.
BlurImage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Full-resolution image URL. |
| lqip | string | "" | Tiny placeholder data URL or low-quality preview source. |
| alt | string | "" | Alt text. |
| width | number | string | — | Used to compute aspect-ratio when both are set. |
| height | number | string | — | Used to compute aspect-ratio. |
| loading | string | "lazy" | Native loading attribute. |
| imageClass | string | object | array | "" | Classes applied to the inner img. |
| imageStyle | string | object | — | Inline style for the inner img. |