advanced
Custom Provider
If a 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 contextoptions
: (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.