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://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Vision UI Dashboard"
  />
</Box>

<Box boxSize="sm">
  <Image
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Vision UI Dashboard"
  />
</Box>

Size#

The size of the image can be adjusted using the boxSize prop.

<Stack direction="row">
  <Image
    boxSize="100px"
    objectFit="cover"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Vision UI Dashboard"
  />
  <Image
    boxSize="150px"
    objectFit="cover"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Free Chakra UI Dashboard"
  />
  <Image
    boxSize="200px"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Free Chakra UI Dashboard"
  />
</Stack>

<Stack direction="row">
  <Image
    boxSize="100px"
    objectFit="cover"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Vision UI Dashboard"
  />
  <Image
    boxSize="150px"
    objectFit="cover"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Free Chakra UI Dashboard"
  />
  <Image
    boxSize="200px"
    src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
    alt="Free Chakra UI Dashboard"
  />
</Stack>

Image with border radius#

<Image
  borderRadius="full"
  boxSize="150px"
  src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
  alt="Vision UI Dashboard"
/>

<Image
  borderRadius="full"
  boxSize="150px"
  src="https://demos.creative-tim.com/vision-ui-dashboard-react/static/media/welcome-profile.7ff4f89a.png"
  alt="Vision UI Dashboard"
/>

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

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#

`align`

Description

How to align the image within its bounds. It maps to css `object-position` property.

Type

SystemProps["objectPosition"]

`crossOrigin`

Description

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.

Type

"" | "anonymous" | "use-credentials"

`fallback`

Description

Fallback element to show if image is loading or image fails.

Type

React.ReactElement

`fallbackSrc`

Description

Fallback image src to show if image is loading or image fails. Note 🚨: We recommend you use a local image

Type

string

`fit`

Description

How the image to fit within its bounds. It maps to css `object-fit` property.

Type

SystemProps["objectFit"]

`htmlHeight`

Description

The native HTML height attribute to the passed to the img

Type

string | number

`htmlWidth`

Description

The native HTML width attribute to the passed to the img

Type

string | number

`ignoreFallback`

Description

If true, opt out of the fallbackSrc logic and use as img

Type

boolean

`onError`

Description

A callback for when there was an error loading the image src

Type

((error: string | SyntheticEvent<HTMLImageElement, Event>) => void)

`onLoad`

Description

A callback for when the image src has been loaded

Type

((event: SyntheticEvent<HTMLImageElement, Event>) => void)

`sizes`

Description

The image sizes attribute

Type

string

`src`

Description

The image src attribute

Type

string

`srcSet`

Description

The image srcset attribute

Type

string