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

 

相关文章:

  • 2021-08-13
  • 2021-11-14
  • 2021-12-16
  • 2021-07-15
  • 2021-06-08
  • 2021-12-28
  • 2021-08-08
猜你喜欢
  • 2021-11-17
  • 2021-04-16
  • 2021-11-08
  • 2021-12-11
  • 2021-10-03
  • 2021-08-26
  • 2021-12-23
相关资源
相似解决方案