Image

Image (이미지)

Image 컴포넌트는 최소한의 스타일로 img를 감싼 컴포넌트예요. 폴리모픽 컴포넌트이며 선택적으로 fallback 이미지를 지정할 수 있어요.

출처: 문서

본문

Image는 img를 최소한의 스타일로 감싼 wrapper예요. 기본적으로 이미지는 부모 너비의 100%를 차지해요. 이미지 크기는 w와 h style props로 제어할 수 있어요.

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

function Demo() {
  return (
    <Image
      radius="md"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
    />
  );
}

이미지 높이 (Image height)

대부분의 경우 이미지가 로딩될 때 레이아웃이 튀지 않도록 이미지 높이를 설정해야 해요. h style props로 설정할 수 있어요.

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

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png"
    />
  );
}

이미지 맞춤 (Image fit)

기본적으로 이미지는 object-fit: cover 스타일을 가져요. 부모 요소를 덮도록 크기가 조정돼요. 이 동작을 바꾸려면 w="auto"와 fit="contain" prop을 설정해요.

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

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      w="auto"
      fit="contain"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png"
    />
  );
}

Fallback 이미지

이미지 로딩에 실패했을 때 대체 이미지를 표시하려면 fallbackSrc prop을 설정해요.

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

function Demo() {
  return (
    <Image
      radius="md"
      src={null}
      h={200}
      fallbackSrc="https://placehold.co/600x400?text=Placeholder"
    />
  );
}

Next.js Image와 함께 사용하기

Image 컴포넌트는 폴리모픽 컴포넌트라서 component prop으로 루트 요소를 바꿀 수 있어요. next/image 등 유사한 컴포넌트와 함께 사용할 수 있어요.

import NextImage from 'next/image';
import { Image } from '@mantine/core';
import myImage from './my-image.jpg';

function Demo() {
  return <Image component={NextImage} src={myImage} alt="My image" />;
}

더 알아보기 (Learn more)

• Card — 이미지를 섹션으로 사용하는 카드 컴포넌트
• style props — 크기 제어 관련 스타일 prop 문서