`<Image>`

(no submodules)

Purpose

<Image> is the decorative image control. Like <TextLabel>, it appears in the closed ControlKind enumeration so a surface can declaratively include brand marks, device backplates, and other static imagery without the runtime needing to special-case the rendering path. The component implements BoundControlProps for uniform runtime treatment but never invokes onChange.

The accessible name is resolved through a falls-through chain (ariaLabel -> alt -> label -> ""), which keeps the API identical to <TextLabel> and ensures that an image embedded as part of a control surface is never missing its accessible name unless the surface author has explicitly opted into it.

Features

Single <img> element with data-kind="image".
Accessible-name fallback: ariaLabel -> alt -> label -> "".
Optional explicit width / height for SSR-stable layout.
aria-disabled reflection of the disabled prop.
Inline className / style overrides.

Usage: Basic

<Image
    value={0}
    onChange={() => undefined}
    min={0}
    max={1}
    src="/assets/logo.png"
    alt="Synth logo"
/>

Usage: Advanced

<Image
    value={0}
    onChange={() => undefined}
    min={0}
    max={1}
    src="/assets/backplate.png"
    label="Device backplate"
    width={1024}
    height={256}
    className="backplate"
    style={{ filter: "brightness(0.9)" }}
/>

API Reference

<Image> props: BoundControlProps & { src: string, alt?, width?, height?, className?, style? }.

Implementation Notes

The component does not lazy-load or preload — that is the consumer's responsibility to wire via wrapping components or browser-native attributes (e.g. loading="lazy"). Skin-driven styling happens through CSS variables and the className slot; the component itself stays close to the bare DOM <img> semantics.

1.9 KiB Raw Blame History

<Image>