공식 문서 : https://chakra-ui.com/docs/components/image

github : https://github.com/chakra-ui/chakra-ui

<aside> 💡

참고하면 좋은 지점

• object-fit에 대한 prop(fit / 기본값 cover)을 제공하는 점
• aspect ratio를 prop으로 제공하는 방법도 있다는 것 </aside>

기본 사용법

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

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

비율/크기 처리 방식

• width와 height 입력 받아서 사용
  • 네이티브 height, width 속성이 필요할 때 htmlWidth와 htmlHeight 속성도 있음
• aspectRatio prop 기반으로 비율 기반 설정을 내장하고 있음
• objectFit : fit prop으로 처리하며 기본은 cover로 제공함

상태 관리

• 상태 관리를 컴포넌트 내부에서 하지 않고 개발자가 직접 Skeleton, 상태 관리 등을 조합해서 구성
• asChild prop을 통해서 Next.js Image와 같은 외부 컴포넌트 조합해서 사용