1、渲染时图片存在,但损坏,会出现破损图,界面很丑呀
解决方案:调用vue显示的图片的时候会有一些图片404的问题,为了界面的美观,这里进行图片错误是显示默认图片的处理,下面贴出代码
data: { pic: 'this.src="' + ('img/noPic.png') + '"', },
html里显示:
<img class="cover" v-if="item.picturesUrl" :src="item.picturesUrl" :onerror="pic"/> //如果图片不存在 <img v-else src="../img/noCircle.png" class="cover"/>
使用 :onerror="pic" 方法进行操作
这样你的图片即使是错误的,但是界面上还会显示一张默认的图
注意:在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。