images return 404 when using nuxt generate + vercel preset

[fayazara]

Using nuxt-img with local images and they dont seem to work when the pages are prerendered. They throw a 404 error.

The images are displayed locally in dev environment.

Reproduction - https://github.com/fayazara/nuxt-image-issue-reproduction

Deployed on Vercel - https://nuxt-image-issue-reproduction.vercel.app/
Deployed on Netlify - https://wondrous-medovik-574c06.netlify.app/

A remote image URL work btw. Happens only with local static images.

Build command was set to yarn generate

[jimhlad]

I believe this may be another one related to the WIP on static generation #614

[fayazara]

Anybody found a temporary fix to this yet?

[MilenaPetkanova]

Anyboyd found a temporary fix to this yet?

I didn't, so I just migrated my whole project to Nuxt2.
In the meantime, I'm subscribed to the repo to stalk when #614 is gonna be ready.

[dosstx]

I believe I am seeing this issue too. It works fine when I do npm run dev but once I deploy to produciton, the local images are 404.

IPX Error: Error: File not found (/public/images/avatar-placeholder.svg)

[Achuttarsing]

same error for me, even after the #614 update

[wadclapp]

Just started using this package and swapped out all my images, and is broken for me too. Using Nuxt v2 and nuxt-image v0.7.1, but it works fine on localhost dev/build

[mctweb]

This is also the case for me when using <nuxt-img> and local images. It works in dev, but not with build or generate. Tried on both linux and windows without success.

[Teo3tc]

hello i clone your projet and in nuxt config i add the path like this

image: {   staticFilename: '[publicPath]/[name]-[hash][ext]'  } 

• yarn generate
• yarn preview

Is work for me

doc

[djmtype]

image: {   staticFilename: '[publicPath]/[name]-[hash][ext]'  } 

@Teo3tc I tried doing that. My image paths on Netlify are still broken.

[djmtype]

Even after the nuxt-img@edge update 1.0.0-27954023.4cee565 it still remains broken.

After downloading my rendered project from Netlify, none of the public/_ipx images are even there. Something's a miss.

[Maximus1000]

Now working config yet for me with Netlify provider whereas works locally.

[andysay]

same problems some files return 404

[mplno]

I have been following the vercel-static Nitro preset discussion and just gave that new preset a shot. I'm unable to get images working in a static build on Vercel. I've made a minimal reproduction.

Repo: https://github.com/mplno/nuxt-vercel-image-example
Site deployed on Vercel: https://image-example-aebof1cnt-color-camp.vercel.app/

My steps to init this repo:

npx nuxi init nuxt-vercel-image-example
cd nuxt-vercel-image-example
yarn add --dev @nuxt/image-edge

I have the Vercel project build step overwritten to yarn generate. I am seeing "Nuxt 3.5.2 with Nitro 2.4.1" logged in the Vercel build, confirming that I am on the updates that support vercel-static.

Have I made an error in setting up a vercel-static project? If not, I'm happy to help debug further.

[TheoParkos]

Just to chime in. We have the same issue hosting it via NGINX and NGINX Ingress via K8s.

Turns out when you build the NUXT project, the static folder was not transferred, so we got 404s, but the output on our deployed instances did not have anything as NUXT does not package static during it's build process.

After that was fixed, no more 404s and everything started working.

[victorraji]

Just to chime in. We have the same issue hosting it via NGINX and NGINX Ingress via K8s.

Turns out when you build the NUXT project, the static folder was not transferred, so we got 404s, but the output on our deployed instances did not have anything as NUXT does not package static during it's build process.

After that was fixed, no more 404s and everything started working.

how did you fix this TheoParkos ?