Image
Image primitive with automatic broken-link placeholder fallback, aspect-ratio preservation, and object-fit scaling.
// Plain markup
import { Image } from "@shavin/ui";Placeholder (no source)
{/* No src → a graceful placeholder, sized by ratio */}
<Image ratio="16/9" className="w-64" />With a source
<Image src="/hero.jpg" alt="Hero" ratio="16/9" className="w-64" />Aspect ratios
<Image ratio="1/1" className="w-32" />
<Image ratio="4/3" className="w-32" />
<Image ratio="16/9" className="w-32" />Fit
{/* object-fit: cover (default) vs contain */}
<Image src="/tall.jpg" fit="cover" ratio="1/1" className="w-32" />
<Image src="/tall.jpg" fit="contain" ratio="1/1" className="w-32" />Radius
<Image radius="none" ratio="1/1" className="w-24" />
<Image radius="medium" ratio="1/1" className="w-24" />
<Image radius="large" ratio="1/1" className="w-24" />
<Image radius="full" ratio="1/1" className="w-24" />Broken source → placeholder
{/* Broken / invalid src → gracefully falls back to SVG placeholder */}
<Image src="/does-not-exist.jpg" alt="Missing" ratio="16/9" className="w-64" />Props
| Prop | Type | Default |
|---|---|---|
| src | string | — |
| alt | string | — |
| ratio | string | — |
| fit | "cover" | "contain" | "fill" | "none" | — |
| placeholder | React.ReactNode | — |
| radius | "none" | "small" | "medium" | "large" | "full" | "inherit" | "inherit" |