Vue 2 breaks native image lazy loading

[markussorg]

Version

2.6.14

Reproduction link

https://jsfiddle.net/hdutLfz7/

Steps to reproduce

1. Open https://jsfiddle.net/hdutLfz7/
2. Open Chrome Dev-Tools Network-Tab
3. Click "Run"
4. See all images get loaded "at once" (this shouldn't happen, because we have native loading="lazy" enabled on the images)
5. Clear Network-Tab
6. Remove "new Vue.." in JS-Tab (Remove Vue)
7. Click "Run"
8. Scroll the page and watch Network-Tab (images get loaded lazily --> expected behavior)

What is expected?

Images get loaded lazily

What is actually happening?

Images get loaded all at once

---

I wanted to add native image loading to my site and it didn't work when I added the tag loading="lazy" on my images. After I removed Vue from the site, it worked.

Tested with latest Chrome: Version 92.0.4515.107

[posva]

The lazy attribute must be added before the src so Vue sets it first, which is necessary for dynamically added images:

    <img loading="lazy" src="https://picsum.photos/id/1/1000/1000" />
    <img loading="lazy" src="https://picsum.photos/id/2/1000/1000" />
    <img loading="lazy" src="https://picsum.photos/id/3/1000/1000"  />
    <img loading="lazy" src="https://picsum.photos/id/4/1000/1000"  />
    <img loading="lazy" src="https://picsum.photos/id/5/1000/1000"  />
    <img loading="lazy" src="https://picsum.photos/id/7/1000/1000" />
  >

[ricky11]

This took me 3 days to work out, as the order of tags within an element should not make a difference.