Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Image

Used to display images

Dan Abramov

Usage

import { Image } from "@chakra-ui/react"
<Image src="..." />

Examples

Height

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

Circular

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

Naruto Uzumaki

Aspect Ratio

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

Naruto vs Sasuke

Fit

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

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.

Previous

Icon Button

Next

Input