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

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

`<NuxtPicture>` 是原生 `<picture>` 标签的可替换组件，可直接替换原生标签。

`<NuxtPicture>` 的用法与 [`<NuxtImg>`](https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-img) 几乎相同，但在可能的情况下，它还允许提供 `webp` 等现代格式。

在 MDN 上了解更多关于 [`<picture>` 标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture)。

## 设置

要使用 `<NuxtPicture>`，应安装并启用 Nuxt Image 模块：

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

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

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

</read-more>

---

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


## Sitemap

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