Lazy loading still loads all images after first page load

[Ragura]

Reproduction: https://stackblitz.com/edit/github-roaj2c?file=pages%2Findex.vue

I've noticed that unlike native <img> elements, <NuxtImg> doesn't seem to handle loading="lazy" correctly after the first time a page is loaded. Instead, all images are loaded immediately.

In the linked reproduciton you can see this in action. Keep an eye on the network tab.
The app starts on index.vue. If you navigate to the NuxtImg page using the provided link, only the images in the viewport will be loaded as they should. Now navigate back to the index page and back to the NuxtImg page. You will see that all images are loaded immediately, including those far below the viewport.

I have also provided a page that uses regular <img> tags. You will notice that those do not have the same issue and act as they should even after page navigation.

I hope I'm not misunderstanding what <NuxtImg> does with lazy loading. I assume it does the same as a native <img> tag and it should work accordingly.

[danielroe]

The behaviour here seems to be exactly the same between the two pages. In my browser it loads six images, and then lazy loads the rest.

http://volta.s3.fr-par.scw.cloud/Clean_Shot_2024_04_22_at_15_07_25_b7045710a5.mp4

I tested both in dev + prod.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[Ragura]

That's not the behaviour I'm getting. I followed the exact same steps as you did in the video and uploaded my own version here:
https://drive.google.com/open?id=1DdjOHel5dUGazqKcBHuWl9W5_KddZb6N

You'll notice the Nuxt page loading all images at once on page load.
Using Arc as my browser (but I think you are too?).

[danielroe]

Looking at this, it seems to be a Vue upstream issue. See https://stackblitz.com/edit/github-hec3gw?file=src/App.vue.

Would you raise an issue in https://github.com/vuejs/core, perhaps? 🙏

[Ragura]

Thanks for looking into it. I've reraised the issue in the VueJS core repo here: vuejs/core#10764