Svelte入門：SvelteKitでの画像の扱い -Vol.5-

今日は、SvelteKitでの画像の扱いについて解説しています。

背景

SvelteKitでの画像の扱いについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

@sveltejs/enhanced-img

動的な画像の選択

画像アセットを手動でインポートして<enhanced:img>に渡すこともできます。これは、静的な画像のコレクションがあり、その中から動的に1つを選択したり、それらを反復処理したりする場合に便利です。この場合、処理したい画像を指定するために、以下のようにimport文と<img>要素の両方を更新する必要があります。

<script>
    import MyImage from './path/to/your/image.jpg?enhanced';
</script>

<enhanced:img src={MyImage} alt="代替テキスト" />

Viteのimport.meta.globを使用することもできます。カスタムクエリを通じてenhancedを指定する必要があることに注意してください：

<script>
    const imageModules = import.meta.glob(
        '/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
        {
            eager: true,
            query: {
                enhanced: true
            }
        }
    )
</script>

{#each Object.entries(imageModules) as [_path, module]}
    <enhanced:img src={module.default} alt="代替テキスト" />
{/each}

解説

1. 動的インポートの基本パターン：

• 個別の画像インポート：
  • ?enhancedクエリパラメータの追加
  • インポートした画像を変数として使用
  • <enhanced:img>のsrc属性に変数を指定

1. import.meta.globを使用した一括処理：

• 対象となるファイル形式：
  • avif, gif, heif, jpeg, jpg, png, tiff, webp, svg
• 設定オプション：
  • eager: true：即時読み込み
  • query: { enhanced: true }：画像最適化の有効化

1. 実装パターン：

• 単一画像の動的選択：
  • 個別インポートを使用
  • 条件に応じた画像の切り替え
• 複数画像の一括処理：
  • import.meta.globを使用
  • Svelteのeachブロックでの反復処理

1. 使用上の注意点：

• クエリパラメータenhancedの必須指定
• 適切なファイルパスとパターンの指定
• 画像フォーマットの指定

この機能により、動的な画像処理とコレクションの管理が効率的に行えます。特に多数の画像を扱うプロジェクトでの開発効率が向上します。

おわりに

今日は、 SvelteKitでの画像の扱いについて解説しました。