Image

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.

Aspect Ratio

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

Fit

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

HTML Width and Height

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

Next.js Image

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

import { Image } from "@chakra-ui/react";
import NextImage from "next/image";

const Demo = () => {
  return (
    <Image asChild>
      <NextImage src="..." alt="..." />
    </Image>
  );
};

Props

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