Image

PreviewCode

Stackblitz

Usage

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

<Image src="..." />

Examples

Height

Use the height prop to change the height of the image component.

PreviewCode

Stackblitz

Circular

Here's an example of how to render a circular image.

PreviewCode

Stackblitz

Aspect Ratio

Use the aspectRatio prop to change the aspect ratio of the image component.

PreviewCode

Stackblitz

Fit

By default, the image applies object-fit: cover. Use the fit prop to change the fit of the image component.

PreviewCode

Stackblitz

HTML Width and Height

Use the htmlWidth and htmlHeight props to set the native width and height of the image component.

PreviewCode

Stackblitz

Next.js Image

Use the asChild prop to render the image as a child of the Image component.

import NextImage from "next/image"

;<Image asChild>
  <NextImage src="..." alt="..." />
</Image>

Props

The Image component supports all native props for the img element.