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#

Segun Adebayo
Editable Example

Size#

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

Segun AdebayoDan AbramovDan Abramov
Editable Example

Image with border radius#

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.

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#

NameTypeDescriptionDefault
alignSystemProps["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.-
fallbackReact.ReactElementFallback element to show if image is loading or image fails.-
fallbackSrcstringFallback image `src` to show if image is loading or image fails. Note 🚨: We recommend you use a local image-
fitSystemProps["objectFit"]How the image to fit within its bounds. It maps to css `object-fit` property.-
htmlHeightstring | numberThe native HTML `height` attribute to the passed to the `img`-
htmlWidthstring | numberThe native HTML `width` attribute to the passed to the `img`-
ignoreFallbackbooleanIf `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-
sizesstringThe image `sizes` attribute-
srcstringThe image `src` attribute-
srcSetstringThe image `srcset` attribute-
Edit this page