Skip to main content

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