<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 : 관련 호출을 위해 함께 사용 가능하도록 제공함