IPX error 404's serving images through NGINX on SSR site

[plindelauf]

• I setup NGINX in proxy mode with the exact config file as described here (first snippet of code, with my own domain name in the server_name field).
• Nuxt runs in SSR mode (not static).
• "@nuxt/image": "^0.7.0" is added in the dependencies in package.json.
• I also explicitly included "ipx": "^0.9.11" in package.json.
• All images in my project are located in (the default) /static/img so I have not setup the custom serverMiddleware (I tried that too, but that didn't work either, BTW), as describe here.

Now when I open my project in a browser through my domain name, all loads fine except the images with the nuxt-image tag that are to be served through IPX. All of them keep returning "404 Not Found". The request are made to <my domain>/_ipx/img/base/logo.png, for instance. All works fine on my development machine.

What am I missing? I thought it might have something to do with my NGINX config, but when I request time image URL with CURL directly on the server itself with curl -v "http://localhost:3000/_ipx/img/base/logo.png" I also get a 404.

Update: I also tried by simply running the Nuxt app on my local machine in production mode and then the IPX requests fail as well.

(BTW, I also tried a deployment as a Digital Ocean App, exactly as described here but that exhibits the exact same problem).

[Daedra22]

PUSH, got exactly the same problem and cant figure it out.

Similar issues: #611 #587 #573

[plindelauf]

This issue is blocking us from going into production with our new site. Since there seems to be little activity towards solving this issue, I'm hoping someone can at least share how they use nuxt-image at all in a basic production setup (without CDN's, for instance). Can anyone help, please?

[plindelauf]

Ok, I found a workaround: I'm now using the free tier of imgix.com, following this guide. Extremely silly that I need to go through an external provider to get the images of my production server, but it works. I still hope this gets fixed very soon so that IPX works in production mode, just like it works in development mode.

[milesingrams]

Same issue. IPX works locally broken on production. Ill try netlify provider

[vedmant]

I have the same issue, none of my images work with nuxt-img, here is example <nuxt-img loading="lazy" class="w-80 inline-block max-w-full max-h-full" src="~assets/images/about/pub1.svg" alt="" /> it returns 404 for dev and in production.

[tobychidi]

I have the same issue, none of my images work with nuxt-img, here is example <nuxt-img loading="lazy" class="w-80 inline-block max-w-full max-h-full" src="~assets/images/about/pub1.svg" alt="" /> it returns 404 for dev and in production.

Same here

[mahapo]

+1

[twuncher]

+1

[bitmonti]

+1

[L422Y]

+1

[L422Y]

You guys wouldn't happen to have something like this would you?

routeRules: {
 '/**': {
    swr: true
  },
}

[plindelauf]

Nope. I have no routeRules in my config at all.

[SleepiestAdam]

Also running into a similar issue using IPX where I get a 404 error for all images hosted locally and a net::ERR_TOO_MANY_REDIRECTS for all external images.

I've attempted using cloudflare as a provider as an alternative; but this too has issues in that the url isn't formed properly (even if I set the baseUrl and add the external domain to my "domains" array in nuxt.config.ts).

[ndragun92]

Same issue here. On Vercel it show images while on Netlify its broken

[codydon]

same issue I have deploying on digital ocean

[vpiskunov]

Same issue on Cloudflare pages - any pointers at all from maintainers or anyone?

[sig9]

I think I am seeing the same sort of issue when I deploy to azure static web apps. https://[site].azurestaticapps.net/_ipx/w_4096/images/feature/FeatureX.png yields IPX Error: Error: File not found (/home/site/public/images/feature/FeatureX.png)

[kiranimeid]

ended up using nuxt server routes to process the image and serve it. I can't get the module to work on production (SSR).

[megFree]

Same issue for @nuxt/image: ^0.7.1 and "ipx": "^1.2.0".

[reallymello]

I'm having this issue as well using the Azure static website template and using @nuxt/image": "^1.0.0-rc.1". Is it broken for everyone or am I missing a guide maybe? Works fine locally.

[jugurtha-gaci]

same issue "@nuxt/image": "^1.0.0-rc.1"

[DMiradakis]

Yep same issue right now with Azure static web app.

• "@nuxt/image": "^1.0.0-rc.1",

[DaDlugosch]

The same issue for me. When I'm using default ipx provider, locally (through node) it works correctly, but when I try local cloudflare environment, or even deploy it, or try to deploy it to deno, it's not working. I receive this error message: 500: Unknown provider: none.

I use this package.json in my project:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^20.5.1",
    "autoprefixer": "^10.4.15",
    "nuxt": "^3.7.0",
    "postcss": "^8.4.28",
    "prettier": "^3.0.2",
    "sass": "^1.66.1",
    "stylelint": "^15.10.3",
    "stylelint-config-standard-scss": "^10.0.0",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "@nuxt/image": "1.0.0-rc.1"
  }
}

[DMiradakis]

@DaDlugosch I gave up for the moment and am using <img> tags. Not a great option, but until someone addresses this, I'm not sure what else to do. I don't understand the low-level parts enough at the moment to open up a PR.

[YannFFT]

Same here with IPX provider when building to production "@nuxt/image": "1.0.0-rc.3", "nuxt": "^3.7.4"

[Thevetat]

Likewise same issue here. Will try to understand the codebase a bit more and see what is happening.

[J3m5]

We are encountering the same issue. Any news about a solution?

[ChuanfengZhang]

We are encountering the same issue. Any news about a solution?