N
Nuxt•3mo ago
d4vv

NuxtImg issue during build - doesn't copy image

For what concerns NuxtImg, nuxt evaluates the v-if condition at compile time and does not copy the images to _ipx/ unless the condition evaluates to true (which is unlikely at compile time). So generally when I put NuxtImg inside any "v-if" condition it doesn't work on build. Is that a bug?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @d4vv. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This is not a bug, but rather a limitation of how static image optimization works during the build process in Nuxt with the Nuxt Image module. When you use Nuxt's static site generation (nuxt generate), images are only optimized and copied if they are detected during the build. If your <NuxtImg> component is inside a v-if condition that cannot be statically evaluated at build time (for example, if it depends on runtime data), Nuxt cannot "see" that the image is needed, so it does not process or copy it to the output directory. This results in missing images at runtime. The documentation for static images explains this behavior: if images are not reachable during generation (such as those inside unreachable modals, pages, or dynamic runtime conditions), they will not be optimized or copied, leading to 404 errors. To work around this, you can use the nitro.prerender.routes option to explicitly tell Nuxt which images to pre-render, even if they are not detected automatically during the build process: 
export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/market.jpg',
        '/_ipx/w_140/market.jpg',
        // etc.
      ]
    }
  }
})
export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/market.jpg',
        '/_ipx/w_140/market.jpg',
        // etc.
      ]
    }
  }
})
This ensures that the specified images are included in the build output, regardless of whether they are statically detected in your templates or not.
Optimizing images for static websites ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@357201234064572416> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?