<NuxtImg>

Nuxt 提供了一个 <NuxtImg> 组件来自动处理图像优化。

<NuxtImg> 是一个用于原生 <img> 标签的即插即用替换品。

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

设置

为了使用 <NuxtImg>,你应该安装并启用 Nuxt Image 模块:

Terminal
npx nuxi@latest module add image

使用

<NuxtImg> 直接输出一个本地的 img 标签(没有任何包装器围绕它)。像你使用 <img> 标签一样使用它:

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

将产生:

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