Skip to content

fix: infer configured providers and their modifiers in useImage #2141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DamianGlowala wants to merge 3 commits into
base: main
Choose a base branch
from
+29 −27
Open

fix: infer configured providers and their modifiers in useImage #2141

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f40c5a8
fix: infer configured providers and their modifiers in `useImage`
DamianGlowala Feb 26, 2026
80613db
align fn definition with types
DamianGlowala Feb 26, 2026
92cf582
remove generics fallback
DamianGlowala Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/runtime/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function createImage(globalOptions: CreateImageOptions) {
options: globalOptions,
}

const getImage: $Img['getImage'] = (input: string, options = {}) => {
const getImage = (input: string, options: ImageOptions<any> = {}): ResolvedImage => {
const image = resolveImage(ctx, input, options)

// Prerender static images
Expand All @@ -25,20 +25,20 @@ export function createImage(globalOptions: CreateImageOptions) {

for (const presetName in globalOptions.presets) {
$img[presetName] = ((source, modifiers, options) =>
$img(source, modifiers, { ...globalOptions.presets[presetName], ...options })) as $Img[string]
$img(source, modifiers, { ...globalOptions.presets[presetName], ...options } as ImageOptions<any>)) as $Img[string]
}

$img.options = globalOptions
$img.getImage = getImage
$img.getMeta = ((input: string, options?: ImageOptions) => getMeta(ctx, input, options)) as $Img['getMeta']
$img.getMeta = ((input: string, options?: ImageOptions<any>) => getMeta(ctx, input, options)) as $Img['getMeta']
$img.getSizes = ((input: string, options: ImageSizesOptions) => getSizes(ctx, input, options)) as $Img['getSizes']

ctx.$img = $img as $Img

return $img
}

async function getMeta(ctx: ImageCTX, input: string, options?: ImageOptions) {
async function getMeta(ctx: ImageCTX, input: string, options?: ImageOptions<any>) {
const image = resolveImage(ctx, input, { ...options })

if (typeof image.getMeta === 'function') {
Expand All @@ -49,7 +49,7 @@ async function getMeta(ctx: ImageCTX, input: string, options?: ImageOptions) {
}
}

function resolveImage(ctx: ImageCTX, input: string, options: ImageOptions): ResolvedImage {
function resolveImage(ctx: ImageCTX, input: string, options: ImageOptions<any>): ResolvedImage {
if (input && typeof input !== 'string') {
throw new TypeError(`input must be a string (received ${typeof input}: ${JSON.stringify(input)})`)
}
Expand Down
12 changes: 8 additions & 4 deletions src/types/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,15 @@ export interface ImageSizes {
}

export interface Img {
(source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions): ResolvedImage['url']
<TProvider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(
source: string,
modifiers?: ImageOptions<TProvider>['modifiers'],
options?: ImageOptions<TProvider>
): ResolvedImage['url']
options: CreateImageOptions
getImage: (source: string, options?: ImageOptions) => ResolvedImage
getSizes: (source: string, options?: ImageOptions, sizes?: string[]) => ImageSizes
getMeta: (source: string, options?: ImageOptions) => Promise<ImageInfo>
getImage: <TProvider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(source: string, options?: ImageOptions<TProvider>) => ResolvedImage
getSizes: <TProvider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(source: string, options?: ImageOptions<TProvider>, sizes?: string[]) => ImageSizes
getMeta: <TProvider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(source: string, options?: ImageOptions<TProvider>) => Promise<ImageInfo>
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

rg -n "DefaultProvider" --type=ts -C2

Repository: nuxt/image

Length of output: 465

🏁 Script executed:

cat -n src/types/image.ts | head -100

Repository: nuxt/image

Length of output: 3952

🏁 Script executed:

# Search for getSizes implementation and ImageSizesOptions definition
rg -n "getSizes|ImageSizesOptions" --type=ts -C3

Repository: nuxt/image

Length of output: 5711

Fix getSizes type signature and consider aligning default type parameters.

The getSizes method signature is incorrect: it declares sizes as a separate optional parameter, but the runtime implementation expects it as part of the options object (via ImageSizesOptions). The type should be:

getSizes: <TProvider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(source: string, options?: ImageSizesOptions) => ImageSizes

Additionally, there's an inconsistency in default type parameters: Img interface methods default to keyof ConfiguredImageProviders (all providers), while ImageOptions defaults to DefaultProvider (configured default). This causes ImageOptions<TProvider> to accept different modifiers depending on whether TProvider is inferred or explicitly matched against the method's default. Consider aligning these defaults.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/types/image.ts` around lines 87 - 95, The getSizes signature is wrong: it
declares a separate optional sizes parameter but the implementation reads sizes
from the options object; update getSizes to accept options?: ImageSizesOptions
(i.e. change the third param into a single options parameter) so its signature
becomes getSizes: <TProvider extends keyof ConfiguredImageProviders = keyof
ConfiguredImageProviders>(source: string, options?: ImageSizesOptions) =>
ImageSizes; while you're here, align the default type parameters between the Img
methods and ImageOptions by using the same default (either keyof
ConfiguredImageProviders or DefaultProvider) so ImageOptions<TProvider> resolves
consistently for methods like getSizes, getImage, getMeta and the
options/modifiers types match at call sites.

}

export type $Img = Img & {
Expand Down
Loading