CONTROL

Image

Image renders a responsive asset or HTTPS source with native loading, portable sizing, fitting, and accessibility text.

Bright collaborative workspace

SOURCE AND ALT TEXT

Describe what the image contributes

src accepts a project asset path or an HTTPS URL. On Android and iOS, alt is used only by native accessibility and is never shown over the image. Leave it empty only when the image is decorative.

Team reviewing work at a shared table

Meaningful content

Use alt text to preserve the information for people who cannot see the image.

Decorative image

An empty alt value keeps decorative artwork out of the accessibility description.

dowe
Image src:"/assets/dashboard.png" alt:"Dashboard overview" aspect:"horizontal" objectFit:"cover"

ASPECT RATIO

Frame each image for its place

horizontal uses 16 / 9, vertical uses 9 / 16, square uses 1 / 1, and auto preserves the source dimensions. Native targets resolve the available width first and derive the frame height from that ratio, keeping the image inside its Box, Grid, or section.

People collaborating in an office

horizontal · 16 / 9

Laptop beside a notebook

vertical · 9 / 16

Modern office interior

square · 1 / 1

Open office workspace

auto · source ratio

dowe
Image src:"/assets/profile.jpg" alt:"Profile portrait" aspect:"vertical" rounded:"lg"

OBJECT FIT

Choose how the source fills its frame

cover crops to fill the frame, contain shows the whole image, fill stretches it, and none keeps the source at its natural size.

Open office workspace

cover

Open office workspace

contain

Open office workspace

fill

Open office workspace

none

dowe
Image src:"/assets/logo.png" alt:"Dowe logo" aspect:"square" objectFit:"contain"

WEB CONTROLS AND LOADING

Keep image actions intentional

Web images expose download and fullscreen actions by default. Set hideControls when the image should remain a passive visual, and use eager loading only for imagery needed immediately.

Android reuses bounded native memory and HTTPS disk caches. During a cold load it shows the theme's neutral surface and fades in the bitmap, avoiding a flash of the authored scheme color.

Team reviewing work at a shared table

Default actions · eager

People presenting beside a display

Passive image · lazy

dowe
Image src:"/assets/hero.jpg" alt:"Team at a workshop" loading:"eager" hideControls:true

API

Props

Image also accepts applicable common spacing, sizing, border, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display