Image

The Image component is used to display images.

Image composes Box so you can use all the style props and add responsive styles as well.

chakra ui pro

Import#

import { Image } from "@chakra-ui/react"

Usage#

<Box boxSize="sm">
<Image src="https://bit.ly/sage-adebayo" alt="Segun Adebayo" />
</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/sage-adebayo"
alt="Segun Adebayo"
/>
<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/sage-adebayo"
alt="Segun Adebayo"
/>

Fallback support#

You can provide a fallback image for when there is an error loading the src of the image. 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

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

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel