v-if='imageExists' ... v-else='show a placeholder in html'

<div 
v-for="script in scripts.data" 
:key="script.id">

        <img v-if=imageExists" :src="getImageUrl(script.number)" 
        <div v-else>
                <div class="no_image"></div>
         </div>

I tried doing new XMLHttpRequest... return http.status !=404 inside imageExists(), but this slows down the for loop emmensely. I tried @error, or maybe onerror=""

if I did onerror="this.innerHTML = <div class='no_image'> how could I do that?

tisuchi

3 years ago

Best Answer

Level 70

@the-dude Can you try this?

<div v-for="script in scripts.data" :key="script.id">
    <img v-if="imageExists(script.number)" :src="getImageUrl(script.number)" onerror="this.onerror=null;this.nextSibling.style.display='block';">

    <div v-else class="no_image">
    </div>
</div>

<script>
function imageExists(url) {
    return true;
}

function getImageUrl(number) {
    return `/images/${number}.jpg`;
}
</script>

1 like

TheDude

3 years ago

Level 5

@tisuchi this worked really well, thank you.

tisuchi

3 years ago

Level 70

@the-dude Good to know that :)

Please or to participate in this conversation.