Nuxt Image IPX issues with Nuxt 4
Recently migrated an electron + nuxt project to Nuxt 4. SUddenly, after migrating, moving files, etc.. Nuxt Image, more particularily IPX cannot load files. On the browser, I get a 404 on every file from the public folder (located at app/public) (IPX_FILE_NOT_FOUND).
I have no idea what could cause this. Tried switching the dir in the config of nuxt image to public, ~/public, app/public without success.
Here is the repo where the code and structure is: https://github.com/TheDogHusky/nekoviewer
Running this with electron 37, nuxt latest (4.0.3) and node 22.
GitHub
GitHub - TheDogHusky/nekoviewer: Yet another manga reader, built wi...
Yet another manga reader, built with Nuxt3 and Electron. - TheDogHusky/nekoviewer
3 Replies
Hi @Adam. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing with Nuxt Image (IPX) returning 404s for files in your public folder after migrating to Nuxt 4 is likely related to the new directory structure and how Nuxt resolves static assets.
Key points from the knowledge sources:
- In Nuxt 4, the
Your 404 errors are almost certainly because your
public/ directory must be at the project root, not inside app/. Files in public/ are served at the root URL and are not processed by the build. If you place public/ inside app/, Nuxt will not find your static assets, resulting in 404 errors from IPX and the browser [Nuxt 4 Directory Structure].
- The default location for Nuxt Image's IPX provider is the root-level public/ directory. If you want to use a different directory, you must set the dir option in your nuxt.config.ts, but this is not recommended unless you have a specific reason [Nuxt Image Providers].
- Referencing images should be done with a root-relative path, e.g., <NuxtImg src="/my-image.png" /> for a file at public/my-image.png [Nuxt Image Providers].
What to do:
1. Move your public/ directory to the project root (not inside app/). Your structure should look like this:
2. Reference images with a root-relative path:
3. Do not set dir: 'app/public' or similar in your Nuxt Image config. The default should be public/ at the root. Setting it incorrectly can cause IPX to look in the wrong place and return 404s [Nuxt Image dir option].
4. If you previously had public/ inside app/, move it out and restart your dev server.
Summary:Your 404 errors are almost certainly because your
public/ directory is not at the project root. Move it there, use root-relative paths in your image components, and you should see your images load correctly with Nuxt Image and IPX in Nuxt 4 [Nuxt 4 Directory Structure] [Nuxt Image Providers].
If you continue to have issues after correcting the directory structure, double-check that your image paths are correct and that you have restarted your development server.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@662227196814819349> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Fixed this issue, thanks