vue操作的填坑之旅

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标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。

原文地址:https://www.cnblogs.com/simba-lkj/p/7656361.html