<NuxtImg>

ソース
Nuxt は、画像の自動最適化を処理する <NuxtImg> コンポーネントを提供します。

<NuxtImg> は、ネイティブの <img> タグのドロップイン代替です。

  • 組み込みのプロバイダーを使用してローカル画像とリモート画像を最適化します。
  • src をプロバイダー最適化された URL に変換します。
  • width と height に基づいて画像を自動的にリサイズします。
  • sizes オプションを指定すると、レスポンシブなサイズを生成します。
  • ネイティブの遅延読み込みと、その他の <img> 属性をサポートします。

セットアップ

<NuxtImg> を使用するには、Nuxt Image モジュールをインストールして有効にする必要があります。

ターミナル
npx nuxt module add image

使用方法

<NuxtImg> は、ネイティブの img タグを直接出力します（ラッパーはありません）。<img> タグと同じように使用してください。

<NuxtImg src="/nuxt-icon.png" />

結果は次のようになります。

<img src="/nuxt-icon.png" />
<NuxtImg> コンポーネントの詳細については、こちらをご覧ください。