How to align the image within its bounds. It maps to css `object-position` property.
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'><ImageboxSize='100px'objectFit='cover'src='https://bit.ly/dan-abramov'alt='Dan Abramov'/><ImageboxSize='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#
<ImageborderRadius='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
fallbackorfallbackSrcprop is provided - The image provided in
srcis currently loading - An error occurred while loading the image
src - No
srcprop 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
fitprop to specify how to fit an image within its dimension. It uses theobject-fitproperty. -
Added support for the
alignprop to specify how to align the image within its dimension. It uses theobject-positionproperty. -
Added support for custom
fallbackcomponent.
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
alignDescription
Type
ResponsiveValue<ObjectPosition<Length>>crossOrigin
crossOriginDescription
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.
Type
"" | "anonymous" | "use-credentials"fallback
fallbackDescription
Fallback element to show if image is loading or image fails.
Type
ReactElement<any, string | JSXElementConstructor<any>>fallbackSrc
fallbackSrcDescription
Fallback image src to show if image is loading or image fails.
Note 🚨: We recommend you use a local image
Type
stringfallbackStrategy
fallbackStrategyDescription
- beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src
Type
FallbackStrategyDefault
beforeLoadOrErrorfit
fitDescription
How the image to fit within its bounds. It maps to css `object-fit` property.
Type
ResponsiveValue<ObjectFit>htmlHeight
htmlHeightDescription
The native HTML height attribute to the passed to the img
Type
string | numberhtmlWidth
htmlWidthDescription
The native HTML width attribute to the passed to the img
Type
string | numberignoreFallback
ignoreFallbackDescription
If true, opt out of the fallbackSrc logic and use as img
Type
booleanDefault
falseloading
loadingType
"eager" | "lazy"onError
onErrorDescription
A callback for when there was an error loading the image src
Type
ReactEventHandler<HTMLImageElement>onLoad
onLoadDescription
A callback for when the image src has been loaded
Type
ReactEventHandler<HTMLImageElement>sizes
sizesDescription
The image sizes attribute
Type
stringsrc
srcDescription
The image src attribute
Type
stringsrcSet
srcSetDescription
The image srcset attribute
Type
string