Astrojs Imageコンポーネントで動的に画像を読み込む

Astrojs assetsを使ってスクリーンサイズに最適化した画像をWebP形式で配信するで説明した通り、AstroのImageコンポーネントは画像を簡単に最適化することができ便利です。

Imageコンポーネントは画像ファイルの動的インポートにも対応しており、何らかのデータに基づいて画像を出し分けるということが可能です。

この記事では、AstrojsのImageコンポーネントで画像ファイルを動的に読み込む方法を解説します。

動的に画像を読み込む

画像ファイルは次のように src/assets/ 以下に配置されているとします。

src/
  assets/
    avatar-1.jpg
    avatar-2.png
    avatar-3.jpeg

下記のAstroコンポーネントは画像パスを受け取るようにしておくことで、コンポーネントの呼び出し側から動的に画像を切り替えることができるようになっています。

画像ファイルを動的に読み込むには下記のように import.meta.glob() にパスパターンを渡すことで、画像への参照を持ったオブジェクトを得ます。

---
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';

interface Props {
   imagePath: string;
   altText: string;
}

const { imagePath, altText } = Astro.props;

const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
if (!images[imagePath]) {
  throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);
}
---

<Image src={images[imagePath]()} alt={altText} />

ここで images は下記のようなオブジェクトになっています。

const images = {
  '/src/assets/avatar-1.jpg': () => import('./assets/avatar-1.jpg'),
  '/src/assets/avatar-2.png': () => import('./assets/avatar-2.png'),
  '/src/assets/avatar-3.jpeg': () => import('./assets/avatar-3.jpeg')
}

得られたオブジェクトを通常と同じようにImageコンポーネントの src プロパティに渡すと画像を動的に表示することができます。

images オブジェクトの値は関数オブジェクトであるため images[imagePath]() のように () をつけて関数呼び出しが必要なことを忘れないようにしてください。

詳細は下記の公式ドキュメントをご覧ください。

Dynamically import images - Astro Docs

以上です。この記事では、AstrojsのImageコンポーネントで画像ファイルを動的に読み込む方法を解説しました。

💕

記事が参考になったら少額を寄付いただけると励みになります。

otoyo - GitHubスポンサー

動的に画像を読み込む

コメントを送る