Docs: Custom provider docs outdated?

[NetMan134]

Hi! I'm using NuxtImg, and (want to) use a custom provider (for my very simple use case for now - an nginx server with images and video)

I ran npx nuxi module add @nuxt/image and tried to add a custom provider

Now, I stumbled upon issues trying to follow instructions under this link: https://image.nuxt.com/advanced/custom-provider

The example presented in the link above does not work - the main problem seems to be the lack of defineProvider, it is not exported - does not even exist in the node_modules/@nuxt/image anywhere (but does exist on this repo in the src dir, which is not present after installing @nuxt/image with nuxi or npm for that matter) - and so the app refuses to run

I scoured the web for solutions, and I stumbled upon this discussion here, which hopefully points or pointed me already to the right direction:

providers/selfhost.ts

import { joinURL } from 'ufo';
import type { ProviderGetImage } from '@nuxt/image';
import { createOperationsGenerator } from '#image';

const operationsGenerator = createOperationsGenerator();

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseUrl } = {},
) => {
  if (!baseUrl) {
    baseUrl = '';
  }

  const operations = operationsGenerator(modifiers);

  return {
    url: joinURL(baseUrl, src + (operations ? '?' + operations : '')),
  };
};

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/image'
  ],

  (...)

  image: {
    providers: {
      selfhost: {
        name: 'selfhost',
        provider: '~/providers/selfhost.ts',
        options: {
          baseUrl: 'http://MY_URL.TLD/',
        },
      },
    },
    provider: 'selfhost',
  },
});

Now, this code above works, contrary to the example in the documentation I don't really know if this is the right way to go about it, could somebody please advise?

Backtracking, I think that part of the docs should be updated, to avoid potential confusion - or maybe I'm in the wrong, I'm not sure, again I ask for a sanity check 🫠

I don't think this needs a reproduction, because the @nuxt/image npm package doesn't seem to contain defineProvider anywhere? https://www.npmjs.com/package/@nuxt/image?activeTab=code

Thanks for your help, Oskar

[mateocarciu]

Hey, thank you so much for your solution, had the same problem, they should definitely update their docs !

[DamianGlowala]

This appears to be fixed in the upcoming v2.0.0 release, where the missing export is included. In the meanwhile, you can opt in to the nightly release version by following the docs (be mindful of any breaking changes - https://github.com/nuxt/image/pull/1812).

[Patrity]

Thanks for the solution, I've been going nuts for the past half-hour over this one.

[Niek-Veenstra]

Thanks for the solution, i have been looking for 15 minutes now.

[maxmhoff]

Thank you, this was exactly what I was looking for!

[guliyevravan]

Thanks 👍👍