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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

import { Image } from "@chakra-ui/react"

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>

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>

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

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

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

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

Props#

Name	Type	Description	Default
align	`SystemProps["objectPosition"]`	How to align the image within its bounds. It maps to css `object-position` property.	-
crossOrigin	`"" \| "anonymous" \| "use-credentials"`	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.	-
fallback	`React.ReactElement`	Fallback element to show if image is loading or image fails.	-
fallbackSrc	`string`	Fallback image `src` to show if image is loading or image fails. Note 🚨: We recommend you use a local image	-
fit	`SystemProps["objectFit"]`	How the image to fit within its bounds. It maps to css `object-fit` property.	-
htmlHeight	`string \| number`	The native HTML `height` attribute to the passed to the `img`	-
htmlWidth	`string \| number`	The native HTML `width` attribute to the passed to the `img`	-
ignoreFallback	`boolean`	If `true`, opt out of the `fallbackSrc` logic and use as `img`	-
onError	`((error: string \| SyntheticEvent<HTMLImageElement, Event>) => void)`	A callback for when there was an error loading the image `src`	-
onLoad	`((event: SyntheticEvent<HTMLImageElement, Event>) => void)`	A callback for when the image `src` has been loaded	-
sizes	`string`	The image `sizes` attribute	-
src	`string`	The image `src` attribute	-
srcSet	`string`	The image `srcset` attribute	-

Edit this page