Image
Image (이미지)
이미지를 표시하는 컴포넌트예요. 다양한 크기·비율·잘림 방식으로 이미지를 손쉽게 제어해요.
출처: 문서
본문
사용법 (Usage)
import { Image } from "@chakra-ui/react"
<Image src="..." />
예제 (Examples)
높이 (Height)
height prop을 사용해 이미지 컴포넌트의 높이를 변경해요.
원형 (Circular)
원형 이미지를 렌더링하는 방법의 예시예요.
가로세로 비율 (Aspect Ratio)
aspectRatio prop을 사용해 이미지 컴포넌트의 가로세로 비율을 변경해요.
맞춤 (Fit)
기본적으로 이미지는 object-fit: cover를 적용해요. fit prop을 사용해 이미지 컴포넌트의 맞춤 방식을 변경해요.
HTML 너비와 높이 (HTML Width and Height)
htmlWidth와 htmlHeight prop을 사용해 이미지 컴포넌트의 네이티브 너비와 높이를 설정해요.
Next.js 이미지 (Next.js Image)
asChild prop을 사용해 이미지를 Image 컴포넌트의 자식으로 렌더링해요.
import { Image } from "@chakra-ui/react"
import NextImage from "next/image"
const Demo = () => {
return (
<Image asChild>
<NextImage src="..." alt="..." />
</Image>
)
}
Props
Image 컴포넌트는 img 요소의 모든 네이티브 prop을 지원해요.