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.
Props#
align
alignDescription
Type
SystemProps["objectPosition"]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
React.ReactElementfallbackSrc
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 @see Issue https://github.com/chakra-ui/chakra-ui/issues/5581
Type
FallbackStrategyDefault
"beforeLoadOrError"fit
fitDescription
How the image to fit within its bounds. It maps to css `object-fit` property.
Type
SystemProps["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
booleanloading
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
stringProps#
align
alignDescription
How to align the image within its bounds. It maps to css `object-position` property.
Type
SystemProps["objectPosition"]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
React.ReactElementfallbackSrc
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 @see Issue https://github.com/chakra-ui/chakra-ui/issues/5581
Type
FallbackStrategyDefault
"beforeLoadOrError"fit
fitDescription
How the image to fit within its bounds. It maps to css `object-fit` property.
Type
SystemProps["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
booleanloading
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