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

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

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

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

레시피

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

   ---
    import { getImage } from "astro:assets";
   ---

2. 사용자 정의 이미지에 대한 새 컴포넌트를 만듭니다. MyCustomComponent.astro는 Astro.props로부터 세 개의 props를 받습니다. mobileImgUrl 및 desktopImgUrl props는 다양한 뷰포트 크기에서 이미지를 만드는 데 사용됩니다. alt prop은 이미지의 대체 텍스트에 사용됩니다. 이러한 props는 사용자 정의 이미지 컴포넌트를 렌더링할 때마다 전달됩니다. 다음 import를 추가하고 컴포넌트에서 사용할 props을 정의합니다. TypeScript를 사용하여 props의 타입을 정의할 수도 있습니다.

   ---
   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() 함수를 호출하여 각 반응형 이미지를 정의합니다.

   ---
   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> 요소를 만듭니다.

   ---
   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를 전달해야 합니다.

   ---
   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"
   />