<aside> 💡

참고하면 좋을 지점

• object-fit을 fit prop으로 제공. 기본값 cover
• component prop으로 Next.js Image 등의 외부 컴포넌트로 교체 가능 </aside>

기본 사용법

import { Image } from '@mantine/core';

<Image
  src="<https://example.com/photo.jpg>"
  h={200}
  radius="md"
  fallbackSrc="<https://placehold.co/600x400>"
/>

비율/크기 처리 방식

• w, h 스타일 prop으로 크기 지정 (기본은 부모 width 100%)
• fit prop으로 objectFit 제어, 기본값은 cover
• aspectRatio 별도 prop 없음 — AspectRatio 컴포넌트로 감싸서 사용
• radius prop으로 border-radius 지정 가능 (Mantine 테마 토큰 사용)

로딩 처리

• 별도 로딩 처리가 없음
• Skeleton 컴포넌트를 외부에서 조합해서 사용하는 편

에러 처리

• fallbackSrc와 onError 콜백을 제공함
  • fallbackSrc : 에러 발생 시 자동 교체 (src가 없더라도 fallbackSrc로 처리됨)
    • URL만 받으며, ReactNode나 base64는 제공하지 않음
  • onError : 관련 호출을 위해 함께 사용 가능하도록 제공함