Skip to content

Img call signature does not accept configured providers other than default #2174

@ispitsyn

Description

@ispitsyn

Environment

  • @nuxt/image: v2.0.0
  • Nuxt: 4.x
  • TypeScript: strict mode

Description

The Img interface's call signature hardcodes ImageOptions without a generic parameter, which defaults to DefaultProvider (resolved from ProviderDefaults['provider']). This means the provider field in the options argument only accepts the default provider (e.g. "ipx"), even when other providers are properly configured.

Generated types (.nuxt/image/providers.d.ts):

interface ProviderDefaults {
  provider: "ipx"
}
interface ConfiguredImageProviders {
  "directus": ImageProviders["directus"]
  "ipx": ImageProviders["ipx"]
}

Img interface (module.d.ts):

type DefaultProvider = ProviderDefaults extends Record<'provider', unknown> ? ProviderDefaults['provider'] : never;

interface ImageOptions<Provider extends keyof ConfiguredImageProviders = DefaultProvider> {
    provider?: Provider; // defaults to "ipx"
}

interface Img {
    (source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions): ResolvedImage['url'];
    //                                                                ^^^^^^^^^^^^
    //                        ImageOptions without generic = ImageOptions<"ipx">, so provider?: "ipx"
}

Reproduction

Configure a non-default provider (e.g. directus) in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    providers: {
      directus: {
        provider: 'directus',
        options: {
          baseURL: 'https://example.com/assets/',
        },
      },
    },
  },
})

Then use useImage() with that provider:

const img = useImage();
const url = img('some-id', {}, { provider: 'directus' });
//                                          ^^^^^^^^^^
// TS2322: Type '"directus"' is not assignable to type '"ipx"'

Expected behavior

The provider option in Img's call signature should accept any key from ConfiguredImageProviders, not just the default provider.

Suggested fix

Make the Img interface generic or widen the provider type to accept all configured providers:

interface Img {
    (source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions<keyof ConfiguredImageProviders>): ResolvedImage['url'];
}

Workaround

import type { ImageOptions } from '@nuxt/image';

const directusOptions = { provider: 'directus' } as unknown as ImageOptions;
const url = img('some-id', {}, directusOptions);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions