<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> 组件的信息。