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"
/>
)
HTML Width and Height
Use the htmlWidth and htmlHeight props to set the native width and height of
the image component.
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
htmlWidth="400px"
htmlHeight="400px"
src="https://i.pravatar.cc/400?u=1"
/>
)
}
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.