DATA DISPLAY · 57 / 89
Image
Image — a Material You data display component for React Native and web.
packages/ui/src/components/Image.tsx
Live demo
360
720
Full
Properties
6 controls
Alt text
Aspect Ratio
Radius
Large
Resize Mode
Cover
Show Loader
Simulate broken URL
Usage
Image.tsx
<Image alt="A placeholder photo" />
Variants
The states and shapes this component is meant to be used in.
Ratios
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
Resize modes
%22%2F%3E%3C%2Fsvg%3E)
cover
contain
center
Fallback
A source that cannot resolve falls back to an icon rather than a blank box.
broken source → fallbackIcon
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
14 on ImageProps
Filter props
alt
required
string
Alternative text. Required — an image with no accessible name is invisible
to screen readers.
source
required
ImageSourcePropType
fallbackIcon
MaterialCommunityIconsGlyphs
default: "image-broken-variant"
Shown when loading fails and there is no `fallbackSource`.
fallbackSource
ImageSourcePropType
Swapped in when `source` fails to load.
height
DimensionValue
onError
() => void
onLoad
() => void
radius
RadiusValue
Corner radius — a shape token name or a raw radius.
ratio
number
Width divided by height. Use instead of `height` for fluid layouts.
resizeMode
ImageResizeMode
default: "cover"
showLoader
boolean
default: true
Renders a pulsing skeleton until the image resolves. Defaults to `true`.
style
StyleProp<ViewStyle>
testID
string
width
DimensionValue