<NuxtImg>

源码
Nuxt 提供了一个 <NuxtImg> 组件,用于自动处理图片优化。

<NuxtImg> 是原生 <img> 标签的无缝替代品。

  • 使用内置提供者优化本地和远程图片
  • src 转换为提供者优化后的 URL
  • 根据 widthheight 自动调整图片大小
  • 在提供 sizes 选项时生成响应式尺寸
  • 支持原生懒加载以及其他 <img> 属性

安装

要使用 <NuxtImg>,你需要安装并启用 Nuxt 图片模块:

Terminal
npx nuxt module add image

使用

<NuxtImg> 直接输出原生的 img 标签(不包含任何包裹元素)。使用方式与 <img> 标签相同:

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

会生成:

<img src="/nuxt-icon.png" />
阅读更多关于 <NuxtImg> 组件的内容。