vue.js 中的错误事件< img>不起作用?

cld4siwp  于 2023-02-13  发布在  Vue.js
关注(0)|答案(4)|浏览(260)

我使用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函数中进行了调试,但它没有运行到该函数中?我不知道为什么?
你能帮我解释一下这个问题吗?谢谢!

rjee0c15

rjee0c151#

我试着做一些类似的事情,但我的问题是,我得到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>
6psbrbz9

6psbrbz92#

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

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

fkvaft9z3#

谢谢大家读到我的问题,我解决了这个问题:)。
错误时事件不起作用的原因是{item}对象的属性“logoPath”不存在,因此vueJS中的“:src”未绑定,图像的src确实存在=〉错误时不起作用:)
我的错:(

yeotifhr

yeotifhr4#

我用了不同的方法来解决这个问题,但它没有为我工作。之后,我已经导入图像地址。它在vue3工程。

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

相关问题