<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" />