Dm DuskMoon React
Standard duskmoon implemented 8 demos

Image

Image renders images with preview and placeholder behavior.

Import @duskmoon-dev/components/image
6 API sections
13 documented props
6 behavior 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

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading 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
DuskMoon previewLoading image
Moonlight Theme
DuskMoon previewLoading 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.ts Scenarios: packages/components/src/components/image/Image.test.tsx
ImageProps interface extends Omit< ComponentProps<"img">, "alt" | "children" | "fallback" | "placeholder" | "preview" | "src" >
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.
ImagePreviewConfig interface
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.
ImagePreviewGroupProps interface extends ComponentProps<"div">
Prop Type Required Description
preview ImagePreview No preview configures Image.
children ReactNode No children configures Image.
ImagePreview type 
boolean | ImagePreviewConfig
ImagePreviewGroupComponent type 
ForwardRefExoticComponent< ImagePreviewGroupProps & RefAttributes<HTMLDivElement> >
ImageComponent type 
ForwardRefExoticComponent< ImageProps & RefAttributes<HTMLDivElement> > & { PreviewGroup: ImagePreviewGroupComponent