<NuxtImg>
Nuxt 提供了一个 <NuxtImg> 组件,用于自动处理图片优化。
<NuxtImg>
是原生 <img>
标签的无缝替代品。
- 使用内置提供者优化本地和远程图片
- 将
src
转换为提供者优化后的 URL - 根据
width
和height
自动调整图片大小 - 在提供
sizes
选项时生成响应式尺寸 - 支持原生懒加载以及其他
<img>
属性
安装
要使用 <NuxtImg>
,你需要安装并启用 Nuxt 图片模块:
Terminal
npx nuxt module add image
使用
<NuxtImg>
直接输出原生的 img
标签(不包含任何包裹元素)。使用方式与 <img>
标签相同:
<NuxtImg src="/nuxt-icon.png" />
会生成:
<img src="/nuxt-icon.png" />