nuxt / nuxt/image

Nuxt Image 2.0.0: image.dir does not work with IPX, but undocumented image.ipx.dir does (TS types reject it)

Open
#2,270 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Environment
  • Nuxt: 4.4.8
  • @nuxt/image: 2.0.0
  • Package manager: pnpm
  • OS: Windows 11
Reproduction

Project structure:

public/
└── logo.png

Component:

<NuxtImg
  src="/logo.png"
  alt="Logo"
  width="20"
  height="20"
/>

The static file is accessible:

http://localhost:3000/logo.png

However, the generated IPX URL fails:

http://localhost:3000/_ipx/s_40x40/logo.png

with:

{
  "error": {
    "message": "[404] [IPX_FILE_NOT_FOUND] File not found: /logo.png"
  }
}
Configuration that does NOT work
image: {
  provider: 'ipx',
  dir: 'public'
}

This still produces:

[IPX_FILE_NOT_FOUND] File not found: /logo.png
Configuration that DOES work
image: {
  provider: 'ipx',
  ipx: {
    dir: 'public'
  }
}

After using the above config, IPX correctly resolves files from public/.

TypeScript issue

The working configuration produces a TS error:

Object literal may only specify known properties,
and 'dir' does not exist in type 'Partial<IPXOptions>'.

Example:

image: {
  provider: 'ipx',
  ipx: {
    dir: 'public'
  }
}
Expected behavior

Either:

  1. image.dir should work as documented for IPX, or
  2. image.ipx.dir should be documented and typed correctly.
Actual behavior
  • image.dir does not appear to affect IPX file resolution.
  • image.ipx.dir fixes the issue at runtime.
  • TypeScript rejects image.ipx.dir.
Additional notes

This appears to be a mismatch between runtime behavior and TypeScript definitions. Runtime is reading image.ipx.dir, but the exposed IPXOptions type does not include dir.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Nuxt image configuration, the IPX provider's dir handling, and the exposed IPXOptions type, using the supplied public/logo.png reproduction. Compare image.dir with image.ipx.dir at runtime and in TypeScript; done means the documented configuration works or the nested option is documented and accepted by the type.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
performance, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.