<NuxtImg>
Nuxt 提供了一个 <NuxtImg> 组件来自动处理图像优化。
<NuxtImg>
是一个用于原生 <img>
标签的即插即用替换品。
- 使用内置提供者来优化本地和远程图像
- 将
src
转换为提供者优化的 URL - 自动根据
width
和height
调整图像大小 - 提供
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" />