img设置的默认的图片不显示

Question

有些图片是没有的，设置默认图片，但是默认图片也不显示，仅仅有一个占位。

更换图片也不行，直接写默认图片地址也不成，图片地址写成绝对路径也不行

相关代码

<li v-for="(item,index) in listData" :key="index" v-if="listData.length>0">

<a :href="item.url" target="_blank">
    <img :src="item.file.url" alt="" width="80px" height="80px" :onerror="defaultImg" />
    <div>{{item.title}}</div>
</a>

</li>

data(){

return{
    defaultImg:'this.src="' + require("../../../assets/img/fuwu.jpg") +'";this.onerror=null'
}

}

这个是我故意设置的url错误图片，这是显示的结果，无论换哪张图片默认显示的都是这样

这是希望显示的默认图片

Answer 1

1.你的目的是没有图片展示默认图片？

import defaultUrl from 'xxxx';
   <img :src="item.file.url?item.file.url:defaultUrl" alt="" width="80px" height="80px"/>

2.你的目的是图片加载失败时才展示默认图片？

import defaultUrl from 'xxxx';
<img :src="item.file.url" alt="" width="80px" height="80px" @error="loadErrorFun(item.index)" /> //注意：index是v-for的参数。
loadErrorFun(index){
    this.listData[index].item.file.url = defaultUrl;
    this.$forceUpdate();
}

Answer 2

<img :src="item.file.url" alt="" width="80px" height="80px" :onerror="defaultImg" />
data() {

return {
    defaultImg: 'this.src="' + require("../../../assets/img/fuwu.jpg") +'"'
}

}

Answer 3

require进来的图片是否可以直接和字符串进行拼接？感觉这个地方路径会有问题。

我都是用以下方法，是没问题的。

把图片放在静态文件夹static里，然后defaultImg直接赋值一个字符串，像这样：
defaultImg: 'this.src="./static/img/fuwu.jpg";this.onerror=null'