高级

自定义提供商

如果 CDN 提供商不受支持，您可以自行定义。

提供商条目

运行时将接收源、图像修饰符及其提供商选项。它负责生成优化图像的 URL，并且需要是同构的，因为它可能在服务器或客户端上被调用。

providers/my-provider.ts
import { joinURL } from 'ufo'
import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

const operationsGenerator = createOperationsGenerator()

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseURL } = {}
) => {

  if (!baseURL) {
    // also support runtime config 
    baseURL = useRuntimeConfig().public.siteUrl
  }

  const operations = operationsGenerator(modifiers)

  return {
    url: joinURL(baseURL, src + (operations ? '?' + operations : '')),
  }
}

参数

  • src: 图像的源路径。
  • modifiers: 在图像组件中或作为预设定义的图像修饰符列表。
  • ctx: (ImageCTX) 图像模块运行时上下文
    • options: (CreateImageOptions) 图像模块全局运行时选项
    • $img: $img 助手

注意：ctx 中的值可能会更改。谨慎使用。

返回

  • url: 优化图像的绝对或相对 URL。

使用您的提供商

注册提供商

创建自己的提供商后，应在 nuxt.config 中注册它。为此，请在 image.provider 内创建一个属性。

nuxt.config.ts
export default defineNuxtConfig({
  // ...
  image: {
    providers: {
      myProvider: {
        name: 'myProvider', // optional value to overrider provider name
        provider: '~/providers/my-provider.ts', // Path to custom provider
        options: {
          // ... provider options
          baseURL: "https://site.com"
        }
      }
    }
  }
})

有许多有用的实用程序可用于编写提供商，方法是从 #image 中导入。有关更多信息，请参见 src/runtime/providers。

使用

将属性 provider 设置为您的自定义提供商名称。

pages/index.vue
<NuxtImg provider="myProvider" src="/image.png" >
<!-- <img src="https://site.com/image.png" /> -->

Weserv

使用 Weserv 的动态图像转换服务优化图像。

静态图像

为静态网站优化图像。