`forceGenerateImages` does not seem to be working

[jmyrland]

Hi,

First off, great module! 👍

I've been struggeling to get the forceGenerateImages feature to work.

Some relevant info:

• Running nuxt version 2.0.0
• Running nuxt-image-loader-module version 1.3.0
• Running nuxt in 'universal' mode

I've got the following settings:

    ['@reallifedigital/nuxt-image-loader-module', {
      imagesBaseDir: 'images',
      imageStyles: {
        placeholder: { actions: ['gravity|Center', 'resize|60', 'quality|40' ] },
        thumbnail: { actions: ['gravity|Center', 'resize|480|270', 'quality|95'] },
      },
      forceGenerateImages: {
        // imageStyle: globPattern
        placeholder: '**/*'
      }
    }]

I want all placeholders to be generated at build time. I've tried running build and generate, but nothing seems to trigger forceGenerateImages. In other words, all images are only generated run time (per request).

At which step (build, start, generate) is this supposed to happen? Am I missing somthing?

Hope you can help :)

[jmyrland]

This was also stated in step 2 of the "Further advice and points of note"

You can organize your images files in further sub-directories if you wish. This will also be reflected in the image URL. For example, if you place a file in <YOUR-APP-ROOT>/content/articles/news/test.png then then tag src attribute should be /content/articles/news/test.png?style=small or whatever style you want to apply.

Should not the src attribute in this case be /articles/news/test.png?style=small? I've tried referring to the base folder as part of the src path, but then no images are loaded.

[Barry-Fisher]

Hi @jmyrland,

There was indeed something strange going on. I've spent most of today trying to get the bottom of this issue. It was a case of 'it works on my machine', however one of the tests was failing on the Circle CI runner which totally didn't match what I was seeing locally.

In the CI environment, the force generated images weren't loading although the logic of this module follows through correctly right the way down to the point where the graphicsmagick (gm) module does its write() command to generate the file.

I've had to put in a workaround in version 1.3.3 which sets a forced waiting time of 250ms which makes the test pass on CI. I tried 100ms and it breaks, so this means a forced wait of one second per 4 images that get generated. I can't see anything upstream in the gm module which points to why this might be happening.

I'm waiting to see whether this becomes an issue for people as I'm sure there will eventually be someone trying to process many hundreds of images!!

Until then, please can you try version 1.3.3 and see if you're able to now successfully force generate the images? To clarify, forced (pre-emptive) image generation at build time happens only when nuxt generate is run. For the live node server, images are expected to be generated on the first time they're requested. This is by design, although happy to receive feedback if you have a particular use case that may be useful to force image generation for non-nuxt-generated sites.

Hope this helps.

Thanks,

Barry

P.S. You're right about the typo in the README. This has been fixed on master. Cheers!

[jmyrland]

To clarify, forced (pre-emptive) image generation at build time happens only when nuxt generate is run. For the live node server, images are expected to be generated on the first time they're requested.

Ah, I see - then this won't work in my case.

The image generation takes up quite alot of resources, which results in "sluggish" image rendering on first render.

My thought, was to generate "placeholders" (really small images, 80px wide max) at the build stage - then load images by request. While the "real" images are generated & loaded, the "placeholder" is displayed. The effect is similar to how medium handles images, and you can see this effect live on solv.as. (It is important to note that I am hosting this on now.sh, which results in a new/fresh server for each deploy, which in turn requires regeneration of all images)

Ideally, I want to inline the base64 string inside the html of the placeholder (<1kb). I think this is feasable if the images are generated at the build stage.

Maybe an alternate solution is to run generate, then copy the static image_style folder into the static folder of the project - then run build.

This is a feature I would love to have - and I'm glad to help if required :)

[dev7ch]

Maybe this could be solved by this (pseudo code)

   ['@reallifedigital/nuxt-image-loader-module', {
      imagesBaseDir: 'images',
      imageStyles: {
        placeholder: { actions: ['gravity|Center', 'resize|60', 'quality|40' ] },
        thumbnail: { actions: ['gravity|Center', 'resize|480|270', 'quality|95'] },
      },
      forceGenerateImages: {
        // imageStyle: globPattern
        placeholder: '**/*'
        mini: {
          pattern: '**/*'
          external:  {
             fullImage: 'https://yourmageserver.com/crop/1600x700' + pattern['filename']
          }
        }
      }
    }]

[realityfilter]

We ran into the same problem. With Nuxt generate only one image style of one image is getting generated. Strangely, calling nuxt generate via npm script "generate": "nuxt generate" and running npm run generate all versions of all images are getting generated.