Nuxt3 中文课程《实战全栈开发简书》限时优惠

<NuxtImg>

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

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

  • 使用内置提供商优化本地和远程图像
  • src转换为提供商优化的URL
  • 根据widthheight自动调整图像大小
  • 在提供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>组件的更多信息。 ::