Image

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

View Source

@chakra-ui/image

Props#

`align`

Description

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

Type

ResponsiveValue<ObjectPosition<Length>>

`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

ReactElement<any, string | JSXElementConstructor<any>>

`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

Type

FallbackStrategy

Default

beforeLoadOrError

`fit`

Description

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

Type

ResponsiveValue<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

Default

false

`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