Replace not found image in Vue

If you want to provide to the user a nicer image replacement than the browser not-found icon in Vue.js, here the way to go:

Assume you have this tag in yout component template:

<img :src="getImagePath" @error="fallback" />

Now you can exploit the error trigger to change a flag in order to provide a different path:

data(){
    return{
      onErr:false
    }
},
methods:{
    fallback () {
    this.onErr = true
  },
  getImagePath(){
    return (this.onErr) ? 'placeholder_path' : 'some_image_path'
  }
}

The downside of this method is that you see a little image swap during js evaluation. This can be mitigated using CSS hiding the img tag if it has errors.