MEDIA / COMPONENT 42

Image

React component

Display responsive imagery with meaningful alternative text.

Try it out

Use the live controls or open the Code tab to view and copy the example.

Geometric blue panels from the staqui sample collection

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`alt`Required	`string`	Standard React / HTML attribute passed to the underlying element.
`fit`	`ObjectFit \| undefined`Default: `"cover"`	See the typed definition and working example for this option.
`aspectRatio`	`string \| undefined`	See the typed definition and working example for this option.
`height`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`loading`	`"eager" \| "lazy" \| undefined`	Standard React / HTML attribute passed to the underlying element.
`sizes`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`src`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`srcSet`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`width`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`defaultChecked`	`boolean \| undefined`	Standard React / HTML attribute passed to the underlying element.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	Initial value for uncontrolled usage.
`className`	`string \| undefined`	Additional CSS class names.
`id`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`style`	`CSSProperties \| undefined`	Inline styles, including CSS custom property overrides.
`rel`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`children`	`ReactNode`	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLImageElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onBlur`	`FocusEventHandler<HTMLImageElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onChange`	`ChangeEventHandler<HTMLImageElement, Element> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onError`	`ReactEventHandler<HTMLImageElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onClick`	`MouseEventHandler<HTMLImageElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.

Accessibility & interaction

Preserve semantic structure and communicate meaning with text rather than color alone.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

Native img supports srcSet, sizes, loading and error handlers. Applications own image assets and fallback policy.

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.

Image

Try it out

API reference

Accessibility & interaction

Variants & implementation notes

Compose with