Generate static images used in modals.

[teegee]

My blog-type test project uses the content and image modules to create pages from markdown. I finally got fully static built-in IPX image generation to work, and two variants of my source images are being generated in dist/_nuxt/images. To display the images, I use $img inside my own component, which also allow the reader to click an image and get a large size third version (2000px) of the image in a modal dialog.

My problem is that images in the modal code are not crawled/processed, and no large-width image variants are generated. I tried adding a dummy with display:none to pull in large-version images into the generating process (which works), but that also causes the browser to always fetch all large-sized images as soon as the page loads.

Is there a way to have 'nuxt generate' create my large-width images, which are only fetched if the user clicks a much smaller thumbnail type image?

[ohnejka]

Same problems - images in modals are not processed

[ohnejka]

Found a quick workaround: used v-show instead of v-if for modals. So, still rendering content that no one may even request - but we don't have much and images are processed by ipx smoothly.

[teegee]

(my solution, copied from my same question on reddit/nuxt):

I figured it out using standard html after failing to use process.{client,server,static} for this purpose.

Basically, something like this:

    <!-- Pull in fullsize URL for static render, but do not fetch in client -->
    <div class="hidden">
      <div :style="`background-image: url('${fullSize}')`"
           style="background-repeat:no-repeat; height: 100px;"/>
    </div>

This does what I wanted, which is to have my large images in dist/_nuxt/images, and to not fetch them ever in client code, until a modal is activated with a different img element.

[Akryum]

By pre-rendering the routes of the optimized images:

import fs from 'node:fs'
import path from 'node:path'

const testimonialPictures = fs.readdirSync(path.resolve(__dirname, 'public/testimonials'))

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ],

  image: {
    provider: 'ipx',
    format: ['webp'],
  },

  nitro: {
    prerender: {
      routes: [
        ...testimonialPictures.map(pic => [
          `/_ipx/f_webp&s_576x320/testimonials/${pic}`,
          `/_ipx/f_webp&s_640x356/testimonials/${pic}`,
        ]).flat(),
      ],
    },
  },
})