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#