content@texuli/mediaagent-emittablecontent
Responsive image
media-image
A responsive image with URL validation, loading states and actions.
Live examples
Responsive image example
Responsive image example
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
src | string | yes | — | URL input is checked by the package URL policy. |
srcset | string | no | — | — |
sizes | string | no | — | — |
widths | array | no | — | — |
loader | event | no | — | Host-provided callback; omit when no host behavior is needed. |
alt | string | yes | — | — |
width | number | no | — | — |
height | number | no | — | — |
fit | enum (cover, contain, fill, none, scale-down) | no | — | — |
focalPoint | object | no | — | — |
placeholder | object | no | — | — |
loading | enum (eager, lazy) | no | — | — |
fetchPriority | enum (high, low, auto) | no | — | — |
trust | enum (developer, untrusted) | no | — | — |
href | string | no | — | URL input is checked by the package URL policy. |
onactivate | event | no | — | Host-provided callback; omit when no host behavior is needed. |
actionLabel | string | no | — | — |
labels | object | no | — | — |
onload | event | no | — | Host-provided callback; omit when no host behavior is needed. |
onerror | event | no | — | Host-provided callback; omit when no host behavior is needed. |
onstatus | event | no | — | Host-provided callback; omit when no host behavior is needed. |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
— | See accessibility notes for keyboard behavior. |
Accessibility
- Provide the required accessible title, description or text alternatives.
- Keep data available in the component-provided text or table alternative.
Evidence for media-image
Latest committed gates for media-image (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
@texuli/media/media-image · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Render responsive image from structured content data.
Don’t use when
Prefer another component
- Application navigation, account controls or mutations.