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.

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

@see https://github.com/chakra-ui/chakra-ui/issues/5581 - beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src

Type
FallbackStrategy

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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel