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.

Import the parts you need from the component's folder.

import { BlurImage } from "@/components/ui/blur-image";

Without lqip, falls back to a shimmer skeleton while loading.

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.