Data display

Image

Lazy images with a loading shimmer, a fallback, and a zoomable preview.

Ant Design: Image

import { Image } from '@alea/ui';

Examples

Lazy, with a shimmer while loading. Press it for a zoomable preview.

When an image can't load.

srcSet and sizes pick the right file, ratio reserves the space, priority loads the hero first, and a color placeholder fades into the image.

An image that loads lazily, shows a shimmer while loading and a fallback on error, and opens a zoomable preview (Ant's Image).

Prop	Type	Default	Description
`alt`required	`string`	-	Describe the image; empty string only when it is decorative.
`src`required	`string`	-	The image URL.
`className`	`string`	-	Extra class names for the root element.
`fallback`	`ReactNode`	-	Shown while loading and if it fails.
`fit`	`"none" \| "inherit" \| "fill" \| "initial" \| "-moz-initial" \| "revert" \| "revert-layer" \| "unset" \| "contain" \| "cover" \| "scale-down"`	`'cover'`	CSS object-fit. Default cover.
`height`	`string \| number`	-	Height in px.
`placeholder`	`string`	-	A tiny blurred version (data URL or color) shown until it loads; then the image fades in. Default the shimmer.
`preview`	`boolean`	`true`	Opens a larger view with zoom on press. Default true.
`priority`	`boolean`	-	The main image of the page (LCP): loads right away with high priority instead of lazily.
`radius`	`"sm" \| "md" \| "lg" \| "none"`	`'md'`	Corner radius token: sm, md (default), lg or none.
`ratio`	`number`	-	Width / height, e.g. 16 / 9: reserves the space so nothing jumps while it loads.
`sizes`	`string`	-	How wide it shows, for srcSet: "(min-width: 768px) 50vw, 100vw".
`srcSet`	`string`	-	Responsive sources: "hero-640.jpg 640w, hero-1280.jpg 1280w".
`width`	`string \| number`	-	Width in px.

Don't