---
title: "Custom Provider"
description: "If a CDN provider is not supported, you can define it yourself."
canonical_url: "https://nuxt.com/modules/image/advanced/custom-provider"
---
# 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.

```ts [providers/my-provider.ts]
import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

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 context
  - `options`: (`CreateImageOptions`) Image module global runtime options
  - `$img`: The [$img helper](https://nuxt.com/modules/image/usage/use-image)

**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`.

```ts [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 `@nuxt/image/runtime`. See [src/runtime/providers](https://github.com/nuxt/image/tree/main/src/runtime/providers) for more info.

### Usage

Set attribute `provider` as your custom provider name.

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


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.