Image
A picture in a box of a set size or ratio, with a placeholder and a fallback.Basic
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Image } from '@advui/core'
<Image src={photo.url} alt="A desert road between red rock canyons" ratio={16 / 9} borderRadius="lg" />Examples
Cover and contain
Preview
Code
Fallback
A missing file shows the default icon, or your own content.Preview
Code
API reference
Image
Also takes View style props for the box (`width`, `height`, `borderRadius`…).| Prop | Type | Default | Description |
|---|---|---|---|
src required | string | number | — | URL, or the result of `require()` for a bundled image on native. |
alt required | string | — | What the image shows. `""` for decoration. |
ratio | number | — | Width divided by height. Without it, give the image a `height`. |
fit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' | 'cover' | How the picture fills the box (`object-fit` / `resizeMode`). |
fallback | ReactNode | image icon | Shown when the image fails to load. |
loading | 'lazy' | 'eager' | — | `lazy` waits until the image nears the viewport.Web only. |
onLoad | () => void | — | The image loaded. |
onError | () => void | — | The image failed to load. |
Accessibility
altis required. It names the image (imgrole) on every platform; passalt=""when the image is decoration or its content is already in nearby text, and it is hidden from screen readers.- When the image fails, the fallback keeps the
imgrole and thealtname, so the page reads the same. - The placeholder and default fallback icon are decorative.
Responsive behavior
With ratio, the height follows the width, so width="100%" scales with the layout. Without it, set both width and height.
Platform notes
Web
Renders an
<img> with object-fit. A load or error that happened before hydration is read from the element once mounted.iOS
Uses React Native’s
Image; fit maps to resizeMode. Remote images need a size from the box (ratio or height).Android
Same as iOS. Use HTTPS URLs.