カスタム画像コンポーネントを作成する

Astroには画像の表示と最適化に使える組み込みコンポーネントが2つあります。<Picture>コンポーネントはレスポンシブ画像を表示し、異なる形式やサイズに対応できます。<Image>コンポーネントは画像を最適化し、形式や画質などのプロパティを渡せます。

<Picture>や<Image>が現時点でサポートしていないオプションが必要な場合は、getImage()関数を使ってカスタムコンポーネントを作成できます。

このレシピでは、getImage()関数 (EN)を使い、メディアクエリに基づいて異なるソース画像を表示する独自の画像コンポーネントを作成します。

レシピ

1. 新しいAstroコンポーネントを作成し、getImage()関数をインポートします。

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

2. カスタム画像用の新しいコンポーネントを作成します。MyCustomImageComponent.astroはAstro.propsから3つのpropsを受け取ります。mobileImgUrlとdesktopImgUrlはビューポートに応じた画像生成に使い、altは代替テキストに使います。これらのpropsはコンポーネントをレンダリングする箇所で渡します。次のインポートを追加し、使用するpropsを定義します。TypeScriptで型付けもできます。

   ---
   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 />をインポートして使用します。2つのビューポート幅に対応する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="ユーザープロフィール画像"
   />