在<img>不起作用

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

本文关键字：不起作用 img      更新时间：2023-09-26

我使用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函数中调试，但它没有运行到这个函数中?我不知道为什么?

你能帮我解释一下这个问题吗?谢谢!

我试图做类似的事情，但我的问题是，我得到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>

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

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

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

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

My bad:

我用了不同的方法来解决这个问题，但它对我不起作用。之后我导入了图像地址。

<template>
  <div :key="index" v-for="(item, index) in list">
    <img :src="item.imagelist" @error="errorImage">
  </div> 
</template>
<script setup>
import img from 'urlImage'
function errorImage(e) {
  e.target.src = img
 }
</script>
相关文章：