---
title: "<NuxtPicture>"
description: "Nuxt 提供了一个 <NuxtPicture> 组件用于自动图片优化。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-picture"
---
# \<NuxtPicture>

> Nuxt 提供了一个 \<NuxtPicture> 组件用于自动图片优化。

`<NuxtPicture>` 是对原生 `<picture>` 标签的替代组件。

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

详细了解[`<picture>` 标签，查看 MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)。

## 安装

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

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

::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"}
查看更多关于 `<NuxtPicture>` 组件的信息。
::

---

- [源码](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.