Image

Open in Playground

ratio: square, video, photo. fit is cover (the default, fills the box) or contain (shows the whole image).

Fallback. If the image fails to load, a labelled box of the same size is shown instead (fallback sets its content). It tries again when src changes.

Props

srcstring
Image URL.
altstring
Alternative text.
ratio'square' | 'video' | 'photo'
Fixed aspect ratio.
fit'cover' | 'contain'
Default: 'cover'
How the image fills its box.
fallbackReactNode
Default: 'Image unavailable'
Shown if loading fails.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

Image props
Prop	Type	Default	Description
`src`	string	–	Image URL.
`alt`	string	–	Alternative text.
`ratio`	'square' \| 'video' \| 'photo'	–	Fixed aspect ratio.
`fit`	'cover' \| 'contain'	`'cover'`	How the image fills its box.
`fallback`	ReactNode	`'Image unavailable'`	Shown if loading fails.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.