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 or fallbackSrc 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 the object-fit property.

• Added support for the align prop to specify how to align the image within its dimension. It uses the object-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

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