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.

    Edit this page on GitHub