<NuxtImg>

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

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

セットアップ

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

npx nuxi@latest module add image

使用方法

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

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

結果

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