<NuxtImg>

<NuxtImg> 可以替代原生的 <img> 标签。

¥<NuxtImg> is a drop-in replacement for the native <img> tag.

• 使用内置提供程序优化本地和远程图片
• 将 src 转换为针对提供商优化的 URL
• 根据 width 和 height 自动调整图片大小
• 获取所有路由记录的完整列表。
• 支持原生延迟加载以及其他 <img> 属性

设置

¥Setup

为了使用 <NuxtImg>，你应该安装并启用 Nuxt Image 模块：

¥In order to use <NuxtImg> you should install and enable the Nuxt Image module:

npx nuxi@latest module add image

用法

¥Usage

<NuxtImg> 直接输出原生 img 标签（无需任何封装器）。像使用 <img> 标签一样使用它：

¥<NuxtImg> outputs a native img tag directly (without any wrapper around it). Use it like you would use the <img> tag:

<NuxtImg src="/nuxt-icon.png" />

结果为：

¥Will result in:

<img src="/nuxt-icon.png" />

:

了解更多关于 <NuxtImg> 组件的信息。

¥Read more about the <NuxtImg> component.

::