Data Displayduskmoonimplemented8 demos

Image

Image renders images with preview and placeholder behavior.

Import@duskmoon-dev/components/image

6API sections

13documented props

6behavior scenarios

Key API

srcaltfallbackplaceholderpreviewimgClassName

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Image is most often configured through `src`, `alt`, `fallback`, `placeholder`.

Covered behavior

Renders image props and classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Loading image

Basic usage

authored

Import the component stylesheet and Image from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function Example() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Renders image props and classes

test-backed

Image scenario from the component test coverage: renders image props and classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageRendersImagePropsAndDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Shows placeholder while loading and hides it after load

test-backed

Image scenario from the component test coverage: shows placeholder while loading and hides it after load.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageShowsPlaceholderWhileLoadingDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Shows placeholder when src is missing

test-backed

Image scenario from the component test coverage: shows placeholder when src is missing.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageShowsPlaceholderWhenSrcDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Uses fallback source when the original image errors

test-backed

Image scenario from the component test coverage: uses fallback source when the original image errors.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageUsesFallbackSourceWhenDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Calls onError when image fails

test-backed

Image scenario from the component test coverage: calls onerror when image fails.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageCallsOnErrorWhenImageDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Loading image

Renders PreviewGroup

test-backed

Image scenario from the component test coverage: renders previewgroup.

Source

import "@duskmoon-dev/components/styles.css";
import { Image } from "@duskmoon-dev/components/image";

export function ImageRendersPreviewGroupDemo() {
  return (<Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>);
}

Preview

Sunshine Theme

Loading image

Moonlight Theme

Loading image

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>
</div>

<div data-theme="moonlight">
  <Image
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' rx='12' fill='%23e58f00'/%3E%3Ccircle cx='118' cy='34' r='20' fill='%23fff7d6'/%3E%3Cpath d='M24 72h112' stroke='%23fff7d6' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"
  alt="DuskMoon preview"
  width={160}
  height={100}
  placeholder="Loading image"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Image. Start with `src`, `alt`, `fallback`, `placeholder` for common usage.

Types: packages/components/src/components/image/Image.types.tsScenarios: packages/components/src/components/image/Image.test.tsx

Prop	Type	Required	Description
`src`	`string`	No	src configures Image.
`alt`	`string`	No	alt configures Image.
`fallback`	`string`	No	fallback configures Image.
`placeholder`	`ReactNode \| boolean`	No	placeholder configures Image.
`preview`	`ImagePreview`	No	preview configures Image.
`imgClassName`	`string`	No	imgClassName configures Image.
`wrapperClassName`	`string`	No	wrapperClassName configures Image.

ImagePreviewConfiginterface

Prop	Type	Required	Description
`visible`	`boolean`	No	visible configures Image.
`mask`	`ReactNode`	No	mask configures Image.
`src`	`string`	No	src configures Image.
`onVisibleChange`	`(visible: boolean, prevVisible: boolean) => void`	No	onVisibleChange configures Image.

ImagePreviewGroupPropsinterface extends ComponentProps<"div">

Prop	Type	Required	Description
`preview`	`ImagePreview`	No	preview configures Image.
`children`	`ReactNode`	No	children configures Image.

ImagePreviewtype

boolean | ImagePreviewConfig

ImagePreviewGroupComponenttype

ForwardRefExoticComponent< ImagePreviewGroupProps & RefAttributes<HTMLDivElement> >

ImageComponenttype

ForwardRefExoticComponent< ImageProps & RefAttributes<HTMLDivElement> > & { PreviewGroup: ImagePreviewGroupComponent