Image
The Image component is used to display images with support for fallback.
Import
import { Image } from "@chakra-ui/react";
Usage
<Box boxSize="sm">
<Image src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
</Box>
Size
The size of the image can be adjusted using the boxSize
prop.
<Stack direction="row">
<Image
boxSize="100px"
objectFit="cover"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Image
boxSize="150px"
objectFit="cover"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Image boxSize="200px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
</Stack>
Image with border radius
<Image
borderRadius="full"
boxSize="150px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
Fallback support
The Image
component allows you provide a fallback placeholder. The placeholder
is displayed when:
- The
fallback
orfallbackSrc
prop is provided - The image provided in
src
is currently loading - An error occurred while loading the image
src
- No
src
prop was passed
You can also opt out of this behavior by passing the ignoreFallback
prop.
<Image src="gibbresh.png" fallbackSrc="https://via.placeholder.com/150" />
Improvements from v1
Added support for the
fit
prop to specify how to fit an image within its dimension. It uses theobject-fit
property.Added support for the
align
prop to specify how to align the image within its dimension. It uses theobject-position
property.Added support for custom
fallback
component.
Usage with SSR
import { Img } from "@chakra-ui/react";
The Img
Component provides a fallback for SSR applications which uses the
image directly without client side checks.
Props
align
align
How to align the image within its bounds. It maps to css `object-position` property.
SystemProps["objectPosition"]
crossOrigin
crossOrigin
The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.
"" | "anonymous" | "use-credentials"
fallback
fallback
Fallback element to show if image is loading or image fails.
React.ReactElement
fallbackSrc
fallbackSrc
Fallback image src
to show if image is loading or image fails.
Note 🚨: We recommend you use a local image
string
fallbackStrategy
fallbackStrategy
- beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src @see Issue https://github.com/chakra-ui/chakra-ui/issues/5581
FallbackStrategy
"beforeLoadOrError"
fit
fit
How the image to fit within its bounds. It maps to css `object-fit` property.
SystemProps["objectFit"]
htmlHeight
htmlHeight
The native HTML height
attribute to the passed to the img
string | number
htmlWidth
htmlWidth
The native HTML width
attribute to the passed to the img
string | number
ignoreFallback
ignoreFallback
If true
, opt out of the fallbackSrc
logic and use as img
boolean
loading
loading
"eager" | "lazy"
onError
onError
A callback for when there was an error loading the image src
ReactEventHandler<HTMLImageElement>
onLoad
onLoad
A callback for when the image src
has been loaded
ReactEventHandler<HTMLImageElement>
sizes
sizes
The image sizes
attribute
string
src
src
The image src
attribute
string
srcSet
srcSet
The image srcset
attribute
string