`proxyRequest` does not work with `<NuxtImg>` but works with regular `<img>`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Environment
╭── Nuxt project info (copied to clipboard) ───────────────────────────────────╮
│ │
│ Operating system Ubuntu 20.04 Linux 5.15.0-179-generic │
│ CPU Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz (8 cores) │
│ Node.js version v24.11.0 │
│ nuxt/cli version 3.35.2 │
│ Package manager pnpm 10.31.0 │
│ Nuxt version 4.4.8 │
│ Nitro version 2.13.4 │
│ Builder vite 7.3.5 │
│ Config app, compatibilityDate, devtools, modules │
│ Modules @nuxt/image 2.0.0 │
╰──────────────────────────────────────────────────────────────────────────────╯
Reproduction
https://stackblitz.com/github/martinszeltins/nuxt-proxy-test
Describe the bug
I have a very simple BFF Nuxt setup. I have
- Server API route
server/api/random/user.ts - Server route
server/random-image/[...path].ts
The API route uses jsonplaceholder to fetch data and the other server route uses proxyRequest to fetch an image from
In my app.vue I fetch my API server route and it works randomwordgenerator.com
Easy enough. But I found that the image route does not work with <NuxtImg> but works fine with regular old <img> 🤔
That's strange. You would expect <NuxtImg> to work just like <img> works. I don't understand why it doesn't work.
When I open my image route in the browser directly it also works just fine 🤷🏻♂️ http://localhost:3000/random-image/img/picture-generator/52e5d64a4955a814f1dc8460962e33791c3ad6e04e507440762a7cd59249c0_640.jpg
I am not sure if this is a bug with Nuxt or NuxtImg.
Screenshot:
Additional context
No response
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction, then inspect app.vue and the server routes server/api/random/user.ts and server/random-image/[...path].ts. Compare the generated request from with a regular and with opening the image route directly. Done means the proxy-backed image renders through while the existing API and direct route continue to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- backend, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100