How to treat image Error 404 on Vuejs?

Question

How to treat image Error 404 on Vuejs?

I'm using the vuetifyjs carousel,I'm consuming an api and it works well but when an image comes that does not exist or broken, it gets giving error:

How do I make it leave a default image for when it has error and stop giving this error in the console?

        <v-carousel class="carrosel" xs6>
          <v-carousel-item
            v-for="(item, i) in p.images"
            :key="i"
            :src="item"
            aspect-ratio="5"
          ></v-carousel-item>
        </v-carousel>

0

vue.js vuetify

Author: Isa, 2019-06-06

Source

1 answers

score 0 · Answer 1

Use the @error attribute that will invoke a function when giving an error in the image

new Vue({
  el: "#app",
  methods: {
  	errorImage( event ){
    
    	event.target.src = 'https://user-images.githubusercontent.com/24848110/33519396-7e56363c-d79d-11e7-969b-09782f5ccbab.png';
        console.clear();
      
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <img :src="'http://www.naoexiste.com'" @error="errorImage" alt="">
  <img :src="'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/200px-Unofficial_JavaScript_logo_2.svg.png'" @error="errorImage" alt="">

  
</div>

Regarding the error in the console is a default browser behavior, so the only thing you can do is clean with console.clear();