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/core"

Usage#

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

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

copy

Editable Example

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>

<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>

copy

Editable Example

Image with border radius#

<Image borderRadius="full" boxSize="150px" src="https://bit.ly/sage-adebayo" alt="Segun Adebayo" />

<Image
  borderRadius="full"
  boxSize="150px"
  src="https://bit.ly/sage-adebayo"
  alt="Segun Adebayo"
/>

copy

Editable Example

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" />

<Image src="gibbresh.png" fallbackSrc="https://via.placeholder.com/150" />

copy

Editable Example

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/core"

The Img Component provides a fallback for SSR applications which uses the image directly without client side checks.

Props#