Nuxt•2mo ago

Nuxt image, how can I add dynamic images in tabs.

Hi, IPX generates a static image only for the first tab for the other 2 which are hidden by default (v-if) does not generate images. How to do it correctly to point these photos to prerender? I already tried to import them. I use <transition> so in the inside I can't give a list with v-show with v-for

6 Replies

kapa.ai•2mo ago

Hi @Encor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your issue with Nuxt Image not generating images for tabs that are hidden by default using v-if. This is a common challenge when working with prerendering in Nuxt. When using v-if with tabs, only the visible tab's images are processed during prerendering, while the hidden tabs' images aren't processed because those DOM elements don't exist during the initial render. Here are a few approaches to solve this: 1. Explicitly prerender the image routes You can explicitly tell Nitro to prerender specific image routes using the nitro.prerender.routes option in your nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/your-image1.jpg',
        '/_ipx/w_120/your-image2.jpg',
        '/_ipx/w_120/your-image3.jpg',
        // Add all image variations you need
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/your-image1.jpg',
        '/_ipx/w_120/your-image2.jpg',
        '/_ipx/w_120/your-image3.jpg',
        // Add all image variations you need
      ]
    }
  }
})

This tells Nuxt to generate these specific image transformations during the build process, regardless of whether they appear in the initial HTML or not. Source 2. Use the prerenderRoutes utility You can use the prerenderRoutes utility in your component to hint to Nitro to prerender additional routes:

<script setup>
// Add this to your component
prerenderRoutes([
  '/_ipx/w_120/your-image1.jpg',
  '/_ipx/w_120/your-image2.jpg',
  '/_ipx/w_120/your-image3.jpg'
])
</script>

<script setup>
// Add this to your component
prerenderRoutes([
  '/_ipx/w_120/your-image1.jpg',
  '/_ipx/w_120/your-image2.jpg',
  '/_ipx/w_120/your-image3.jpg'
])
</script>

This needs to be executed during prerendering to have an effect. Source 3. Move images to the public folder As a simpler alternative, you could move your images to the public folder. Images in the public folder are served as-is and don't go through the IPX processing pipeline, which means they'll always be available regardless of prerendering. This approach sacrifices the optimization benefits of Nuxt Image but ensures your images are always available. 4. Configure the image directory Make sure your image directory is properly configured. If you're storing images in the assets folder, you need to configure Nuxt Image to look there:

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'  // Adjust to match your image directory
  }
})

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'  // Adjust to match your image directory
  }
})

This tells Nuxt Image where to find your source images. Source Important note For static sites, if you've disabled server-side rendering (ssr: false), Nuxt Image won't be able to optimize your images during the static generation process. In this case, you must use the nitro.prerender.routes approach mentioned above. Source Remember that the prerendering approach only works if you're using the static generation build process (nuxi generate or nuxt build with prerendering enabled). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

EncorOP•2mo ago

@kapa.ai How do I set this up correctly using my image example in the public /_assets/solutions/image.png folder , I can't just import these images ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I notice you're trying to use images from a public/_assets/solutions/image.png path. Let me help you set this up correctly with Nuxt Image. Using images from the public folder When using images from the public folder with Nuxt Image, you need to reference them with a path that starts from the public folder root. The public folder content is served at the server root as-is. For your specific example with an image at public/_assets/solutions/image.png, you would reference it like this:

<NuxtImg src="/_assets/solutions/image.png" />

<NuxtImg src="/_assets/solutions/image.png" />

Note that you don't include "public" in the path when referencing it in your component. Source Common issues and solutions 1. 404 errors: If you're getting 404 errors, make sure the path is correct and the image exists in the public folder. 2. Prerendering for tabs: For your tabs issue mentioned earlier, you can still use the prerendering approach:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/_assets/solutions/image.png',
        // Add other sizes or variations as needed
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/_assets/solutions/image.png',
        // Add other sizes or variations as needed
      ]
    }
  }
})

3. Directory configuration: The default directory for Nuxt Image is already set to public, so you don't need to change the dir configuration unless you want to use images from another location. Source Alternative approaches If you prefer not to use the public folder, you could: 1. Move images to assets folder: Place your images in the assets folder and configure Nuxt Image to look there:

export default defineNuxtConfig({
  image: {
    dir: 'assets/solutions'
  }
})

export default defineNuxtConfig({
  image: {
    dir: 'assets/solutions'
  }
})

Then reference them without the leading slash:

<NuxtImg src="/image.png" />

<NuxtImg src="/image.png" />

Source 2. Import images in your component: For dynamic images, you can import them directly:

<script setup>
import img from '~/assets/solutions/image.png'
</script>

<template>
  <NuxtImg :src="img" />
</template>

<script setup>
import img from '~/assets/solutions/image.png'
</script>

<template>
  <NuxtImg :src="img" />
</template>

Source Remember that the approach you choose depends on your specific use case and whether you need the image optimization features of Nuxt Image. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

EncorOP•2mo ago

The problem was that the tabs were in v-if and <transtion>. It helped to rewrite to v-show and add v-for with a keyed div.

Gaming

Programming

Nuxt image, how can I add dynamic images in tabs.

Did you find this page helpful?