Custom Provider

If CDN provider is not supported, you can define it yourself.

Provider Entry

The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a url for optimized images, and needs to be isomorphic because it may be called on either server or client.

import { joinURL } from 'ufo'
// import {} from '#image'

export function getImage(src, { modifiers, baseURL } = {}, { options, $img }) {
  const { width, height, format, fit, ...providerModifiers } = modifiers
  const operations = []
  // process modifiers
  const operationsString = operations.join(',')
  return {
    url: joinURL(baseURL, operationsString, src)
  }
}

Parameters

• src: Source path of the image.
• modifiers: List of image modifiers that are defined in the image component or as a preset.
• ctx: (ImageCTX) Image module runtime context
  • options: (CreateImageOptions) Image module global runtime options
  • $img: The $img helper

Note: Values in ctx might change. Use it with caution.

Return

• url: Absolute or relative url of optimized image.

Use your provider

Register provider

After you create your own provider, you should register it in the nuxt.config. In order to do that create a property inside image.provider.

export default {
  ...
  image: {
    providers: {
      customProvider: {
        name: 'customProvider', // optional value to overrider provider name
        provider: '~/providers/custom', // Path to custom provider
        options: {
          // ... provider options
        }
      }
    }
  }
}

There are plenty of useful utilities that can be used to write providers by importing from ~img. See src/runtime/providers for more info.