<NuxtImg>
Nuxt 提供了一个 <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" />
::阅读更多{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"}
阅读有关<NuxtImg>组件的更多信息。
::