CONTROL
Image
Image renders a responsive asset or HTTPS source with native loading, portable sizing, fitting, and accessibility text.
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.
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.
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.
horizontal · 16 / 9
vertical · 9 / 16
square · 1 / 1
auto · source ratio
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.
cover
contain
fill
none
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.
Default actions · eager
Passive image · lazy
Image src:"/assets/hero.jpg" alt:"Team at a workshop" loading:"eager" hideControls:trueAPI
Props
Image also accepts applicable common spacing, sizing, border, visibility, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||