Nuxt Image and Netlify issues in SSG
Building my project
npm run generate and previewing it locally work fine. All image paths are intact.
However, all images are broken from the public directory, running the same project on Netlify with npm run generate with destination directory set to dist.
What do I need to fix?10 Replies
I also tried setting the destination directory to
.output/public. This fails too.It seems to be an open issue. https://github.com/nuxt/image/issues/638
GitHub
Images returning 404 on using local images in Nuxt 3 · Issue #638 ·...
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://githu...
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Tried running
generate too. Also FAILS! I guess we were warned this was experimental.
@Sr. Full Stack Dev Are you using vite imagetools or some other vue library?Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
You mean hard code the image paths to what it builds out?
@Sr. Full Stack Dev Looking at the Netlify forums and responses from Netlify agents, Nuxt Img needs an adapter for it to work on Netlify.
In the meanwhile, I ran
generate locally, then dropped the generated _ipx directory from .output/public into my public directory and committed those files. Needless to say, this feels like a dirty workaround.did u use provider="static" ? .. i think it expect static folder, not public, like in nuxt3 .. it's probably WIP still 😉
The provider is static by default
I also remember testing out staticFilename: '[publicPath]/images/[name]-[hash][ext]'
and that did nothing.
Looking at the video when Daniel Roe was on Learn with Jason, they also integrated
@nuxt/image-edge into a Nuxt 3 project. https://youtu.be/6OPIirkd1vE?t=4251
Needless to say on Netlify, nuxt-img is not working. https://nuxt-3-nitro.netlify.app/ Visit any post, and you'll see every image is broken. Yet if you generate or build and preview this project locally, all images load just fine.Learn With Jason
YouTube
Nuxt 3 & Nitro
Nuxt.JS v3 is stable, and it introduces a ton of features including Typescript support, Vuejs 3, Vite.JS, and the new Nitro server engine. Framework architect Daniel Roe will teach us all about it.
00:00:00 - Welcome 00:00:43 - Who is Daniel Roe? 00:02:30 - What’s your experience with being an open source maintainer? 00:07:12 - How is the V...
00:00:00 - Welcome 00:00:43 - Who is Daniel Roe? 00:02:30 - What’s your experience with being an open source maintainer? 00:07:12 - How is the V...