uniapp、Vue中 image 如何设置默认图片,图片地址加载失败(404)的话就显示默认图片
一、解决方法(在单层循环中)HTML:在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数<image v-else :src="item" mode="aspectFit" @error="imgerror($event, index)"></image>JS:imgerror(e, index) {this.xiangqingUrl.splice
·
一、解决方法(在单层循环中)
HTML:
在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数
<image v-else :src="item" mode="aspectFit" @error="imgerror($event, index)"></image>
JS:
imgerror(e, index) {
this.xiangqingUrl.splice(index, 1)
this.xiangqingUrl.splice(index, 0, '/static/img/noimg.png')
},
单层结构默认图片可能因为数组长度没有发生改变,因此Vue不会更新数据,因此我们需要删除一个元素后再新增一个默认图片地址,使得Vue发生数据更新。
二、双层循环嵌套解决方法
HTML:
在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数
<swiper-item v-for="(value , indexs) in item.phonts" :key="indexs" >
<video v-if="value.indexOf('mp4') >-1" :src="value" controls></video>
<image v-else :src="value" mode="aspectFit" @error="imgerror($event, indexs,index)"></image>
</swiper-item>
JS:
imgerror(e, indexs,index) {
var ps = JSON.parse(JSON.stringify(this.list[index].phonts))
this.$set(this.list[index],this.list[index].phonts,[])
ps[indexs] = '/static/img/noimg.png'
this.list[index].phonts = ps
},
解释:因为vue的数据绑定存在一些问题,所以在双层遍历当中会出现数据更新问题,因此我们需要给图片数组重新更换地址
注:如果图片长度不改变,vue默认不会更新,所以我们要把数组赋值为空,然后重新赋值(默认图片地址)
更多推荐
已为社区贡献1条内容
所有评论(0)