image not update while loop re-render

[theara72]

hi ! i have problem image not update while i remove item.data re-render is okay but image isn't render at all.if you have solution that would be big help for most user.Please check my code

<div v-if="items.length > 0" class="sticky-container bg-shade pb-3" :class="{'show': triggerCompare}">
        <label class="bg-default txt-white" @click="triggerCompare = !triggerCompare">COMPARE</label>
        <div class="list-container container-fluid py-3">
            <div v-for="(item,index) in items" :key="index" class="item mb-3">
                <img v-if="item.photo" :src="domainPhotoName+pathImageName+item.photo"/>
                <img v-else src="http://localhost:8081/static/images/image_unavailable.png"/>
                <i class="fas fa-times" @click="items.splice(index,1)"></i>
                <div class="des txt-white p-2" :class="{'bg-default-glass':(item.type == 'Rent'),'bg-buy-glass':(item.type == 'Buy')}">
                    <h5>{{ item.title }}</h5>
                    <strong>{{ item.price }}</strong>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-6"><button class="flat-button bg-second txt-white mt-0" v-if="listItem.length >= 2" @click="checkCompare">Compare</button></div>
                <div class="col-6"><button class="flat-button bg-rb txt-white mt-0" @click="$emit('update:items', [])">Clear</button></div>
            </div>    
        </div>
    </div>

[darkylmnx]

same issue here, even when out of a loop, when the data changes the src, the image does not reload

[cerw]

Same here.

[asch3ron]

Yes please fix this! There is no reactivity in the loop.

[synergist23]

same...not updates image src when loop data updated

[lilywang711]

#273 加一个key 就解决了

[richstandbrook]

I've found https://github.com/alexjoverm/v-lazy-image to be a good replacement that does have reactivity of the image src

[rpahlevy]

using unique :key solved my problem.. note. don't use index as key

[sstottelaar]

using unique :key solved my problem.. note. don't use index as key

This solved my issue, thanks!

[webdesignmf]

I was having some trouble when data changes, but using v-lazy directive on <img> tag and a unique key had solved my problem! In my case i have a v-for loop to render the images and in this loop i have a condition to check if the image was already selected (like a wish list), but if i toggle select/deselect, the plugin triggers load event again. The data change thats was causing this problem is a computed data that returns if is selected or not. Its fixed now, thanks ❤️

[matthewyeow]

Hey guys, I had the same issue where my src was sometimes updating and then it just wouldn't update. My image was not in a loop.

Upon reading the docs back on the main github page, there's actually a single lined section... at the very bottom which is not in the table of contents:

Dynamic Switching Pictures

They authors should really put that somewhere near the top or at least update the Table of Contents... since it is so important. Hope this helps someone.

[tylik1]

:key didn't work for me. I've had image in a separate component, not used it as <img/> but instead <ImgComponent/> and i've tried both: setting :key to the <img/> tag and to the <ImgComponent/>. Nothing worked for me. setting observer: true did solve the issue. Though scrolling the page became a bit slower.

Vue.use(VueLazyload, { observer: true });