Lzh on GitHub

Custom Provider

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

提供商入口

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

providers/my-provider.ts
import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '#image'

const operationsGenerator = createOperationsGenerator()

export default defineProvider<{ baseURL?: string }>({
  getImage (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"> -->