<img>中的错误事件不起作用？

Question

我使用VueJS编码前端，加载图像时标签出现问题。

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')
}

目前，我已经在replaceByDefault函数中进行了调试，但是没有运行到该函数中吗？不知道为什么

您能帮我解释一下这个问题吗？谢谢！

Answer 1

我试图做类似的事情，但是我的问题是我在某些图像上得到了404，我想用默认图像替换该图像。

这是我的解决方案：

<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

谢谢大家阅读我的问题，我解决了这个问题:)。

on-error 事件不起作用的原因是因为 {item} 对象的属性 'logoPath' 不存在，因此，vueJS 中的 ':src' 没有绑定，并且图像的 src 确实存在 => on-error不起作用:)

我的错 ：（