Image

The Image component is used to display images with support for fallback.

    SourceTheme source@chakra-ui/image

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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel