Images lazy loading not working

[GuillaumeChk]

Every images of my website are loaded at start-up of my website. As I have around 1000 images, you can guess how it impact the SEO of it… it's almost more than 5 seconds of the page loading just for preload the images.

There was not this issue before I convert my project from SPA to SSR (for SEO purpose).
I added "lazy" value to the loading attribute of every of my q-img but it does not have any impact.
The head of my page has around 1000 lines of this:

<link rel="preload" href="/assets/article_compressed.49ea5345.jpg" as="image" type="image/jpeg">

and I get this error in the console:
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate 'as' value and it is preloaded intentionally.

Maybe I missed something obvious, but I didn't find anything else to prevent loading the images of the other pages than the homepage.

Do you have a solution to still get SEO advantages of SSR and just preload the homepage images?

[suleimanas]

Try:

• QIntersection component: https://quasar.dev/vue-components/intersection
• or intersection directive: https://quasar.dev/vue-directives/intersection
• or QNoSsr component: https://quasar.dev/vue-components/no-ssr

[GuillaumeChk]

Intersection did not worked. I think it is because it does not prevent image to be loaded but only prevent to be shown.
QnoSSR didn't worked neither…

[GuillaumeChk]

I did not mention but I am calling my image dynamically (because there is a lot and they may change from a version to another)

Maybe this force image to be preloaded?

[GuillaumeChk]

I just notice it is the whole asset folder that is preloaded, even if images are not used/called in my code.

What happened and how to not preload the whole asset folder and just the image the page needs?

[GuillaumeChk]

I tried to force to not preload images with this :

extendViteConf(viteConf) {
        //  Exclude automatic preloading of images from the "assets" folder
        viteConf.build.rollupOptions = {
          output: {
            manualChunks(id) {
              if (
                id.includes("/assets/") &&
                /\.(png|jpe?g|gif|svg)(\?.*)?$/.test(id)
              ) {
                return "images";
              }
            },
          },
        };
      },

But then this error showed :
Error: rollupOptions.input should not be an html file when building for SSR. Please specify a dedicated SSR entry.