opinion

Image

An image with a loading state, an error fallback and an empty state.

Van liveryLoads with a spinner, and shows a fallback if the source fails

No source yet

No image

In context

Project cardA cover image, and the empty state when there is none

On track

Harbour rebrandBrand

Identity, site and launch kit for the harbour trust.

No image

van-livery-photos.zip48 MB

No cover yet

Progressive loading

thumbSrc, lazy, fallbackThe thumbnail shows blurred at once and fades out when src paints; lazy waits until near the viewport

thumbSrc, then src

lazy: no request until near the viewport

Round avatar, no src

Fallback tint, no src

Props

Prop	Type	Required	Default
`src`	`string \| undefined`	No	—
`alt`	`string`	Yes	—
`fallback`	`ReactNode`	No	—
`emptyIndicator`	`ReactNode`	No	—
`showPlaceholderLabel`	`boolean \| undefined`	No	false
`loadingIndicator`	`ReactNode`	No	—
`thumbSrc`	`string \| undefined`	No	—
`lazy`	`boolean \| undefined`	No	false
`lazyMargin`	`number \| undefined`	No	300
`fallbackColor`	`string \| undefined`	No	—
`onStateChange`	`((state: ImageDisplayState) => void) \| undefined`	No	—
`onLoad`	`((event: SyntheticEvent<HTMLImageElement, Event>) => void) \| undefined`	No	—
`onError`	`((event: SyntheticEvent<HTMLImageElement, Event>) => void) \| undefined`	No	—

data-rebar-* attributes

data-rebar-component="image" on the root, which also carries data-rebar-image-status="empty"|"loading"|"loaded"|"error"; parts: img, loading, fallback, empty.

Migrating to Ant Design

AntD's own Image is a close structural match for the loading/error states — src/alt/fallback map directly. AntD's Image also bundles a built-in fullscreen preview; this project keeps that as a separate Lightbox component instead of merging the two concerns.

Tint-only empty state

With fallbackColor and no src the empty state is just the tint, with no dashed "No image" frame. Pass showPlaceholderLabel to keep the labelled placeholder.

<Image alt="Cover" fallbackColor="var(--rebar-color-tint-2)" />