nuxt / nuxt/image

`proxyRequest` does not work with `<NuxtImg>` but works with regular `<img>`

Open
#2,266 1 comment 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 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

  1. Server API route server/api/random/user.ts
  2. 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:
Image

Additional context

No response

Logs

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.