---
title: "<NuxtImg>"
description: "Nuxt 提供了一个 <NuxtImg> 组件来处理自动图像优化。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-img"
---
# <NuxtImg>

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

`<NuxtImg>` 是对原生 `<img>` 标签的即插即用替代方案。

- 使用内置提供者优化本地和远程图像
- 将 `src` 转换为提供者优化后的 URL
- 根据 `width` 和 `height` 自动调整图像大小
- 在提供 `sizes` 选项时生成响应式尺寸
- 支持原生懒加载以及其他 `<img>` 属性

## 设置

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

```bash [Terminal]
npx nuxt module add image
```

## 用法

`<NuxtImg>` 会直接输出原生的 `img` 标签（不会有任何外层包装）。像使用 `<img>` 标签那样使用它：

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

将会生成：

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

<read-more target="_blank" to="https://image.nuxt.com/usage/nuxt-img">

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

</read-more>

---

- [源码](https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtImg.vue)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.