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.
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 : ''))
}
}
})
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.
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'
}
}
}
}
})
There are plenty of useful utilities that can be used to write providers by importing from #image. See src/runtime/providers for more info.
Usage
Set attribute provider as your custom provider name.
pages/index.vue
<NuxtImg provider="myProvider" src="/image.png" >
<!-- <img src="https://site.com/image.png"> -->