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

我遇到过类似的问题，我的解决方案是以下代码片段，我知道这个解决方案肯定不是最好的，但是如果你的情况非常紧急，比如我，你可以使用以下解决方案，让我们在一起寻找更好的解决方案

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

Answer 3

感谢大家读到这个我的问题，我解决了这个问题：）。

错误事件不起作用的原因是因为{item}对象的属性'logoPath'不存在，因此，vueJS中的'：src'未绑定，并且图像的src确实存在=＆gt ; on-error不起作用:)）

我的坏:(

<img/>中的事件错误无效？

3 个答案: