Netlify - Nuxt 图片提供者

将您的 Nuxt 应用部署到 Netlify 的可组合平台时，图片模块使用 Netlify 图片 CDN 按需优化和转换图片，不会影响构建时间。Netlify 图片 CDN 还处理内容协商，以使用最有效的图片格式用于请求的客户端。

此提供者在 Netlify 部署中自动启用，以及在使用 Netlify CLI 本地运行时启用。

您也可以手动启用此提供者。为此，将 provider 设置为 netlify 或将以下内容添加到您的 Nuxt 配置中

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    provider: 'netlify',
  }
})

本地开发

要在本地测试图片转换，请使用 Netlify Dev。Netlify CLI 的此功能运行一个本地开发服务器，模拟 Netlify 生产环境，包括 Netlify 图片 CDN。

远程图片

要转换托管在另一个域上的源图片，您必须先配置允许的域

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    provider: 'netlify',
    domains: ['images.example.com']
  }
})

修饰符

除了标准属性之外，您还可以使用 Netlify 图片 CDN position 参数作为 Nuxt Image 的修饰符。

<NuxtImg
  provider="netlify"
  src="owl.jpg"
  height="400"
  width="600"
  fit="cover"
  format="webp"
  quality="80"
  :modifiers="{ position: 'left' }"
/>

已弃用的 Netlify 大型媒体选项

Netlify 的大型媒体服务已弃用。如果此功能已在 Netlify 上为您的站点启用，并且您已在 Nuxt 配置中设置了 provider: 'netlify'，那么这将在构建时检测到，大型媒体将继续像往常一样在您的站点上工作。您也可以通过设置 provider: 'netlifyLargeMedia' 来显式启用它。但是，不建议新的大型媒体配置。

迁移到 Netlify 图片 CDN

要从已弃用的 Netlify 大型媒体选项迁移到更强大的 Netlify 图片 CDN 选项，请将 provider: 'netlify' 更改为 provider: 'netlifyImageCdn'。这将启用 Netlify 图片 CDN 服务，即使大型媒体已在您的站点上启用。

使用已弃用的 Netlify 大型媒体选项

如果您尚未准备好迁移到更强大的 Netlify 图片 CDN 选项，Netlify 继续支持对所有使用 Netlify 大型媒体设置为跟踪的 JPEG、PNG 和 GIF 文件进行动态图片转换。

大型媒体修饰符

除了 height 和 width 之外，已弃用的 Netlify 大型媒体提供者还支持以下修饰符

`fit`

默认值: contain
有效选项: contain （等效于 nf_resize=fit）和 fill （等效于 nf_resize=smartcrop）

IPX

IPX 是 Nuxt Image 的内置自托管图片优化器。

Prepr

Nuxt Image 与 Prepr CMS 集成。