Component Catalog
Image
Responsive image display with fit and sizing options.
A2UI → Nuxt UI Mapping
| A2UI Property | HTML Result |
|---|---|
url | <img> src attribute |
alt | Alt text for accessibility |
fit | CSS object-fit value (cover, contain, fill) |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"img_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"img_demo","components":[
{"id":"root","component":"Column","children":["photo"]},
{"id":"photo","component":"Image","url":"https://picsum.photos/600/400","alt":"Random photo"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
url | string | ✅ | — | Image source URL |
alt | string | — | "" | Alt text for screen readers |
fit | enum | — | — | CSS object-fit: "cover", "contain", "fill" |
Rendering Details
- Uses a native
<img>element with responsive width alttext is passed through for accessibility- No lazy-loading by default (can be added via renderer config)
Try It
Copy the JSONL above and paste it in the Playground Paste tab.