Component reference

ImagePreview

Passive media display; navigation, preview activation and URL authorization belong to the host.

Preview

ImagePreview has no story of its own; this one draws it as part of a composed scene.

Loading and failure

packages/meowtail/stories/image-preview.stories.tsxline 16tsx

render: () => (
  <Stack>
    <p>
      Displaying an image adds no click target; the host can provide open or remove actions
      separately.
    </p>
    <ImagePreview src={sample} alt="Evening hills" loading="eager" />
    <ImagePreview src="/image-preview-delayed.svg" alt="Delayed-loading image" loading="eager" />
    <ImagePreview src="data:image/png,invalid" alt="Image that fails to load" loading="eager" />
    <div>
      <Button variant="outline">Host action</Button>
    </div>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ImagePreview } from "meowtail";

<ImagePreview src="/image-preview-delayed.svg" alt="Delayed-loading image" loading="eager" />

API reference

Props

Prop	Type	Default
`src`Required	`string`	–
`alt`Required	`string`	–
`loading`	`"lazy" \| "eager"`	`"lazy"`
`loadingLabel`	`string`	`"Loading image"`
`failedLabel`	`string`	`"Failed to load image"`
`onLoad`	`(event: Event) => void`	–
`onError`	`(event: Event) => void`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootimagestatus

Registry

The component is registered as image-preview in the meowtail component registry.