Image native

A picture from a URL, or a placeholder box when it has none.

A2UI basic: Image
Children: none

Preview

Loading the renderer…

src

altrequired

fit

width

height

aspectRatio

fallback

focalX

focalY

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Image",
          "src": "https://example.com/cover.jpg",
          "alt": "Cover",
          "fit": "cover",
          "aspectRatio": 1.7777778
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Image rendered by the React renderer on Web — **Web** React

Image rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Image rendered by the Compose renderer on Android — **Android** Compose

Image rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-image, painted by each native renderer.

Variants

fit · contain

fit · cover

fit · fill

fit · none

fit · scaleDown

Props

Prop	Type	Default	Description
`src`bind	`url`	–	The image URL; omit for a placeholder.
`alt`required	`string`	–	The accessibility description.
`fit`	`contain \| cover \| fill \| none \| scaleDown`	`"cover"`	How the picture fills its box.
`width`	`number`	–	Fixed width in px; otherwise the box decides.
`height`	`number`	–	Fixed height in px.
`aspectRatio`	`number`	–	Width over height (16:9 when unset and no height); the box never waits for the picture.
`fallback`	`icon`	–	An icon shown when the picture fails or is missing.
`loading`	`lazy \| eager`	`"lazy"`	Defer loading until near the viewport, or load at once.
`focalX`	`number`	–	Horizontal focal point 0..1 kept when cropped (0.5).
`focalY`	`number`	–	Vertical focal point 0..1 kept when cropped (0.5).
`style`	`style`	–	Extra Box styles for the image box.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: img
Semantics: img (alt = name; decorative when alt is empty)

Not focusable; no keys.

Theming

Recipe parts: Image/rootImage/fallback
Keyed by: fit:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme