Event on-error in <img> is not working?

Question

I using VueJS to code front-end and I have a problem with tag when loading image.

Template
<div class="items" transition="fade" v-for="item in list">
    <img :src="item.logoPath" @error="replaceByDefault">
</div>

JS(ES6)
export default {
    methods: {
        replaceByDefault(e) {
             // code here to replace image by default
        }
    }

    template: require('./template.html')
}

Currently, I had debug in replaceByDefault function but it's not run into this function? I don't know why?

Could you help me explain this problem? thanks!

Answer 1

I tried to do something similar to this but my problem was that I getting 404 on some of the images and I wanted to replace the image with a default image.

this is my solution:

<template>
<div :key="index" v-for="(item, index) in list">
  <img :src="item.logo" @error="replaceByDefault">
</div> 
</template>

<script>
import img from '<<URL>>'
export default {
  methods: {
    replaceByDefault(e) {
      e.target.src = img
    }
  }
}
</script>

Answer 2

I have encountered a similar problem, my solution is the following code snippet, I know this solution is certainly not the best, but if your situation is very urgent, such as me, you can use the following solutions, let us Together looking for a better solution to appear

 <img onerror="javascript:this.src='error.png'">

Answer 3

Thank everybody read this my problem, I resolved this problem :).

The reason on-error event does not work is because the property 'logoPath' of {item} object does not exist, so, the ':src' in vueJS is not bind to and that src of image does exist => on-error does not work :)

My bad :(