Lazysizes: Images added after initial page render lazy loads the wrong image

[docmattman]

I have an "image gallery" or sorts that displays several images. The when I upload a new image, it appends a new image to the page. It lazy loads on of the same images that is already on the page, instead of loading the new proper one. The data-src of the new image is correct, but the src after lazy loading is the url of a different/existing image already on the page, not the new one. Basically the src attribute does not match the data-src.

Is there a proper way to add new images to the DOM and have the lazy loading work?

FYI, I am using a Vue component to render the image gallery from an array of image items/names.

[aFarkas]

This is likely not a lazysizes problem but might be a compatibility problem. Vue might use the markup of the other image to generate the new one, by cloning the element and only changing the data-src attribute. This way the src is used from the earlier and due to the fact that the lazyload class is changed to lazyloaded lazysizes does not detect it as a new image.

But I would need a simplified demo to reproduce this. If a you have an easy way to re-add the lazyload class to the new images it is solved, but you will likely need to use the real dom here.

[docmattman]

Yes, apparently that is the case. I had to re-add the lazyload class in the updated hook of the vue component. Thanks for the help.

[docmattman]

In case anyone else runs into this issue, I found a simple fix for Vue that doesn't require adding the lazyload class to items after adding...

In my case I was using v-for to generate a list of items that had lazy load images like this:

<ul class="my-item-list">
    <li v-for="item in items" class="my-item">
        <img class="lazyload" data-src="http://example.com/image.jpg" />
    </li>
</ul>

The trick is to add :key to the item and Vue will take care of rendering it properly when items are added or sorted like this:

<ul class="my-item-list">
    <li v-for="item in items" :key="item.id" class="my-item">
        <img class="lazyload" data-src="http://example.com/image.jpg" />
    </li>
</ul>

Putting in the :key made it work without needing to add the lazyload class manually to all the items. Anyway, hopefully this helps someone else.