ImagePlaceholder

The box that stands in for a missing, loading or broken image, and for files with no picture. Pick it wherever an image may be absent, so the layout never jumps.

ImagePlaceholder

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ImagePlaceholder

Image could not load

Dark theme, ImagePlaceholder

Image could not load

High contrast theme, ImagePlaceholder

Image could not load

UsageLink to the section Usage

tsx

import { ImagePlaceholder } from '@skribly/ui/media'

tsx

<ImagePlaceholder kind="pdf" label="PDF" />
<ImagePlaceholder state="loading" label="Loading image" />
<ImagePlaceholder state="error" label="Image could not load"
  action={<Button size="sm" variant="outline" onPress={retry}>Try again</Button>} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

With a label it is an image with that name, and the description is linked to it; without one it is hidden.
Loading is marked busy and its pulse stops under reduced motion.
The error state shows a broken picture glyph and words, and becomes a group when it holds an action.

This demo runs through axe in all three themes on every test run. See what the tests check.