Image

The Image component is used to display images with support for fallback.

    Source@chakra-ui/image

Props#

align

Description

How to align the image within its bounds. It maps to css `object-position` property.

Type
SystemProps["objectPosition"]

crossOrigin

Description

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

Description

Fallback element to show if image is loading or image fails.

Type
React.ReactElement

fallbackSrc

Description

Fallback image src to show if image is loading or image fails. Note 🚨: We recommend you use a local image

Type
string

fallbackStrategy

Description

- 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
FallbackStrategy
Default
"beforeLoadOrError"

fit

Description

How the image to fit within its bounds. It maps to css `object-fit` property.

Type
SystemProps["objectFit"]

htmlHeight

Description

The native HTML height attribute to the passed to the img

Type
string | number

htmlWidth

Description

The native HTML width attribute to the passed to the img

Type
string | number

ignoreFallback

Description

If true, opt out of the fallbackSrc logic and use as img

Type
boolean

loading

Type
"eager" | "lazy"

onError

Description

A callback for when there was an error loading the image src

Type
ReactEventHandler<HTMLImageElement>

onLoad

Description

A callback for when the image src has been loaded

Type
ReactEventHandler<HTMLImageElement>

sizes

Description

The image sizes attribute

Type
string

src

Description

The image src attribute

Type
string

srcSet

Description

The image srcset attribute

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel