컨텐츠로 이동

사용자 정의 이미지 컴포넌트 빌드

Astro는 이미지를 표시하고 최적화하는 데 사용할 수 있는 두 가지 내장 컴포넌트를 제공합니다. <Picture> 컴포넌트를 사용하면 반응형 이미지를 표시하고 다양한 형식과 크기로 작업할 수 있습니다. <Image> 컴포넌트는 이미지를 최적화하고 다양한 형식과 품질 속성을 전달할 수 있도록 해줍니다.

<Picture><Image> 컴포넌트가 지원하지 않는 옵션이 필요한 경우 getImage() 함수를 사용하여 사용자 정의 컴포넌트를 만들 수 있습니다.

이 레시피에서는 getImage() 함수를 사용하여 미디어 쿼리에 따라 다양한 소스 이미지를 표시하는 고유한 사용자 정의 이미지 컴포넌트를 만듭니다.

  1. 새로운 Astro 컴포넌트를 생성하고 getImage() 함수를 가져옵니다.

    src/components/MyCustomImageComponent.astro
    ---
    import { getImage } from "astro:assets";
    ---
  2. 사용자 정의 이미지에 대한 새 컴포넌트를 만듭니다. MyCustomComponent.astroAstro.props로부터 세 개의 props를 받습니다. mobileImgUrldesktopImgUrl props는 다양한 뷰포트 크기에서 이미지를 만드는 데 사용됩니다. alt prop은 이미지의 대체 텍스트에 사용됩니다. 이러한 props는 사용자 정의 이미지 컴포넌트를 렌더링할 때마다 전달됩니다. 다음 import를 추가하고 컴포넌트에서 사용할 props을 정의합니다. TypeScript를 사용하여 props의 타입을 정의할 수도 있습니다.

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    ---
  3. 원하는 속성으로 getImage() 함수를 호출하여 각 반응형 이미지를 정의합니다.

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
    });
    const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
    });
    ---
  4. 미디어 쿼리에 따라 다른 이미지의 srcset을 생성하는 <picture> 요소를 만듭니다.

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
    });
    const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
    });
    ---
    <picture>
    <source media="(max-width: 799px)" srcset={mobileImg.src} />
    <source media="(min-width: 800px)" srcset={desktopImg.src} />
    <img src={desktopImg.src} alt={alt} />
    </picture>
  5. .astro 파일에서 <MyCustomImageComponent />를 가져와 사용하세요. 서로 다른 뷰포트 크기에서 두 개의 서로 다른 이미지를 생성하는 데 필요한 props를 전달해야 합니다.

    src/pages/index.astro
    ---
    import MyCustomImageComponent from "../components/MyCustomImageComponent.astro";
    import mobileImage from "../images/mobile-profile-image.jpg";
    import desktopImage from "../images/desktop-profile-image.jpg";
    ---
    <MyCustomImageComponent
    mobileImgUrl={mobileImage}
    desktopImgUrl={desktopImage}
    alt="user profile picture"
    />