How to Treat 404 Image Error in Vuejs?

Question

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

How do I make it to leave a standard image for when it is wrong and stop giving that error on 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>

Answer 1

Use the attribute @error 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 behavior of the browser, so the only thing you can do is clean with console.clear();