nuxt / nuxt/image

IPX_FILE_NOT_FOUND when using npm run build

Open
#1,378 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Bug

Images with non-url friendly characters in filename can't be found during npm run build.

Min reproduction repo

See components/MyImages.vue and nuxt.config.ts

Example of filename with + in name is escaped in content during build but original filename not changed or referenced. File not copied to .output/public/_ipx/.. as f2-a%2Bmber-kipp-75715CVEJhI-unsplash.jpg.

Actual file name f2-a+mber-kipp-75715CVEJhI-unsplash.jpg

Errors prerendering:
  ├─ /_ipx/** (6ms)                                                       nitro 7:31:20 PM
  │ └── Error: [400] IPX_MISSING_ID
  ├─ /_ipx/w_400/example/f2-a%2Bmber-kipp-75715CVEJhI-unsplash.jpg (8ms)  nitro 7:31:20 PM
  │ ├── Error: [404] IPX_FILE_NOT_FOUND
  │ └── Linked from /
  ├─ /_ipx/w_800/example/f2-a%2Bmber-kipp-75715CVEJhI-unsplash.jpg (8ms)  nitro 7:31:20 PM
  │ ├── Error: [404] IPX_FILE_NOT_FOUND
  │ └── Linked from /

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 linked minimal reproduction, then inspect components/MyImages.vue and nuxt.config.ts and run npm run build. Trace the encoded filename through the generated .output/public/_ipx/ path; done means the image is found during prerendering without IPX_FILE_NOT_FOUND or IPX_MISSING_ID errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, typescript
Domain
build-system, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.