Image

Used to display images

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

export const ImageBasic = () => (
  <Image rounded="md" src="https://bit.ly/dan-abramov" alt="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.

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

const Demo = () => {
  return (
    <Image
      height="200px"
      src="https://images.unsplash.com/flagged/photo-1572491259205-506c425b45c3"
    />
  )
}

Circular

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

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

export const ImageCircular = () => (
  <Image
    src="https://bit.ly/naruto-sage"
    boxSize="150px"
    borderRadius="full"
    fit="cover"
    alt="Naruto Uzumaki"
  />
)

Aspect Ratio

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

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

const Demo = () => {
  return (
    <Image
      src="https://wallpapercave.com/uwp/uwp4261619.png"
      alt="Naruto vs Sasuke"
      aspectRatio={4 / 3}
      width="300px"
    />
  )
}

Fit

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

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

export const ImageWithFit = () => (
  <Image
    border="1px solid red"
    rounded="md"
    h="200px"
    w="300px"
    fit="contain"
    src="https://bit.ly/dan-abramov"
  />
)

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.

Icon Button

Input