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