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

醉挽清风
  • 655

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

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

相关代码

<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错误图片,这是显示的结果,无论换哪张图片默认显示的都是这样
图片描述
这是希望显示的默认图片

回复
阅读 5.1k
3 个回答
橘南枳北
  • 1.5k
✓ 已被采纳

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();
}

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

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

}

乌酉
  • 1
新手上路,请多包涵

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

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

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

宣传栏