Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.
Change any prop and inspect the server-rendered component immediately.
<Image />Compare configurations and resize the browser to check responsive behavior.
Render a responsive image with meaningful alternative text.
<Image
src="/showcase-images/violet-circle.svg"
alt="Abstract violet circle on a dark surface"
width="800"
height="450"
/>Use a rounded image in cards, directories, and compact summaries.
<Image
size="sm"
src="/showcase-images/blue-mountain.svg"
alt="Abstract blue thumbnail"
width="400"
height="400"
rounded="true"
/>Use explicit dimensions and eager loading for an above-the-fold visual.
<Image
size="lg"
src="/showcase-images/green-hero.svg"
alt="Abstract green hero visual"
width="1200"
height="600"
loading="eager"
rounded="true"
/>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
src | string | "" | No |
alt | string | "" | No |
width | string | "" | No |
height | string | "" | No |
loading | string | "lazy" | No |
fit | string | "cover" | No |
rounded | boolean | false | No |
class | string | "" | No |