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

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!

3 Answers
3

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'">


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>


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 :(

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.