Drop-in React component for variants + LQIP, no Next.js Image required.
Updated
A React component shipped from dash4devs/react that renders the variant pipeline output as a <picture> with proper srcset, fades in over the LQIP placeholder, and degrades gracefully when variants aren't ready.
import { DashImage } from "dash4devs/react";
<DashImage image={product.main_image} alt={product.name} />
Pass any image object returned by the API. Done — you get AVIF + WebP sources, lazy loading, and the LQIP blur-up effect for free.
<DashImage image={hero} alt="Hero" priority sizes="100vw" />
priority sets loading="eager", decoding="sync", and fetchpriority="high" — use it for the hero / first product card so the browser pulls it immediately.
<DashImage
image={product.main_image}
alt={product.name}
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
/>
The sizes attribute tells the browser how wide the image will render at each breakpoint, so it can pick the right variant from the srcset.
<DashImage image={img} blurDisabled />
Useful for thumbnails where the LQIP would be visible behind transparency.
| Prop | Type | Default | Description |
|---|---|---|---|
image | DashImageData | — | Required. The image object from the API. |
alt | string | "" | Alt text. Always provide for accessibility. |
sizes | string | "100vw" | Standard <img sizes> attribute. |
priority | boolean | false | Eager-load and prioritize this image. |
blurDisabled | boolean | false | Skip the LQIP blur background. |
className, style | — | — | Applied to the wrapping <span>. |
variants_ready is false → renders a plain <img> from image.urllqip is missing → no blur background, just the image with fade-inimage is null/undefined → renders nothing (returns null)