How to handle v-img error?

Question

Vue.js

Hello!
How can I catch the 404 error (if there is no image), instead show the image that the image is not loaded?

v-for="(product, index) in currentPageItems"
    :key="index"
  >
     <div class="px-2 pt-2">
           <v-img v-if = "image === true"
                 :src="$hostname + `/uploads/images/goods/${product.imageSrc}`"
                 height="200px" 
                 contain 
                 position='center'
                 v-on:error="onImgError"
            />
           <v-img v-else 
                 class="mt-3 grey light-2" 
                 :src="$hostname + `/uploads/images/nopic.png`"
                 height="200px" 
                 contain 
                 position='center' 
           />
    </div>

Please tell me if anyone knows.

Answer 1

Add a Boolean property to currentPageItems to indicate if there is an error. Assign src depending on the value of this property. Set it to true when handling the error event.
https://jsfiddle.net/vuz756br/

Answer 2

v-if = "product.imageSrc"
or
class="mt-3 gray light-2"
:src="product.imageSrc ? `${hostname} + /uploads/images/goods/${product.imageSrc}` : `${hostname} + /uploads/images/nopic.png`"
height="200px"
contain
position='center'
/>

Answer 3

Onerror
https://learn.javascript.ru/onload-onerror#zagruzk...
can catch the image loading error , if this is not in the v-img component, then you will have to sculpt your own.