Nuxt•2mo ago

files in public/ 404 Not Found

i put all the images in side public/images and ust <NuxtImg> to render the images. when using build, the image path is correct which is something like /images/user.png. but it become /ipx//images/user.png when using generate and caused 404 Not Found.

3 Replies

kapa.ai•2mo ago

Hi @Zhaolin Lau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using the Nuxt Image module with static site generation (nuxt generate), images in the public/ directory should be accessible via their root-relative paths (e.g., /images/user.png). However, Nuxt Image optimizes images and rewrites their URLs to use the / _ipx/ path (e.g., /_ipx/_/images/user.png). During static generation, Nuxt Image is supposed to optimize and save these images locally, so they are available at the generated _ipx paths. If you are seeing 404 errors for /_ipx/_/images/user.png after running nuxt generate, it usually means that the images were not pre-rendered or optimized during the generation process. This can happen if: - Server-side rendering is disabled (ssr: false), in which case Nuxt Image cannot optimize images during generation. To fix this, you need to explicitly tell Nuxt to pre-render the required image routes using the nitro.prerender.routes option in your nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/images/user.png',
        // Add all required image routes here
      ]
    }
  }
})

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/images/user.png',
        // Add all required image routes here
      ]
    }
  }
})

This will ensure the images are generated and available at the expected paths after build.
Optimizing images for static websites - If you are not using ssr: false, make sure your images are actually in the public/images directory, and you are referencing them with a leading slash (e.g., <NuxtImg src="/images/user.png" />).
Nuxt Image usage If you are still experiencing issues, double-check that your build output contains the _ipx directory with the optimized images. If not, review your Nuxt Image configuration and ensure you are not overriding the default dir option unless you have a specific reason and have handled deployment accordingly.
Nuxt Image providers and directory configuration
Nuxt Image dir option In summary:
- For static generation, use the nitro.prerender.routes option if ssr: false. - Always use the public/ directory for images you want to serve statically with Nuxt Image. - Reference images with a root-relative path. Let me know if you need help with a specific configuration! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@520675622830342144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MakotoPD•2mo ago

set provider to something else than ipx. this is the easiest way. harder is add sharp module and configure it. i had same issue on my server when i deploy nuxt app to vps. here you can check how i configure dockerfile and now it works: https://github.com/MakotoPD/Makoto-website/blob/main/Dockerfile

GitHub

Makoto-website/Dockerfile at main · MakotoPD/Makoto-website

Contribute to MakotoPD/Makoto-website development by creating an account on GitHub.

Gaming

Programming

files in public/ 404 Not Found

Did you find this page helpful?