Lzh on GitHub

提供商

Nuxt Image 支持多种提供商以实现高性能。

提供商简介

提供商是 Nuxt Image 与第三方图像转换服务之间的集成。每个提供商都负责为该图像转换服务生成正确的 URL。

Nuxt Image 可以配置为与任何外部图像转换服务配合使用。请查看侧边栏以获取预配置提供商的列表。

如果您正在寻找尚未支持的特定提供商,您可以 创建自己的提供商

Nuxt Image 会自动优化 <NuxtImg><NuxtPicture> 的源,并接受指定目标的所有 选项,除了特定于其他提供商的修饰符。

默认提供商

Nuxt Image 的默认优化器(optimizer)和提供商(provider)是 ipx。这两种选项都无需任何配置即可使用。

本地图片

图片应存储在项目中的 public/ 目录中。

例如,当使用 <NuxtImg src="/nuxt-icon.png" /> 时,它应该放置在 public/ 文件夹下,路径为 public/nuxt-icon.png

欲了解更多信息,您可以了解有关 公共目录 的更多信息。

存储在 assets/ 目录中的图片不会使用 Nuxt Image 进行处理,因为这些图片由您的打包工具(例如 Vite 或 webpack)管理。

远程图片

使用默认提供商,您还可以优化外部 URL。为此,您需要将它们添加到 domains 选项中。

您还可以通过将 NUXT_IMAGE_DOMAINS 环境变量设置为逗号分隔的域列表来添加远程图像的域。

NUXT_IMAGE_DOMAINS="example.com,yourdomain.com"

环境检测

您可以使用 NUXT_IMAGE_PROVIDER 环境变量设置默认提供商。

自动检测到的提供商:

自定义提供商

可以定义您自己的提供商,了解更多 如何创建自定义提供商