Image

Import#

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

Usage#

Size#

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

Image with border radius#

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.

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#