700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Vue img图片加载不出来或加载错误显示默认图片

Vue img图片加载不出来或加载错误显示默认图片

时间:2023-06-06 11:20:39

相关推荐

Vue   img图片加载不出来或加载错误显示默认图片

之前写页面考虑不到什么占位图,这次UI设计都有一个占位图,不得不逼着自己更准确的考虑图片显示错误时的情况!

1、期初,想着用背景来填充,如果图片显示则就自然而然的把背景图遮盖住了,可实际情况是,如果后台返回的图片有误不显示时,背景图上面还是会有一个破损的小图片显示不美观;

background: url("../../../static/images/avaterSpaceMap.png");background-size: 100% 100%;

2、接着又想着用三元运算符来判断,有值就显示,没值为空时就显示占位图,如是:

:src="reportMsg.userAvatarUrl ?reportMsg.userAvatarUrl : require(../../../static/image/img.png)"

但是这么显示有一个缺点就是,如果后台也返回图片的地址了,但就是404 找不到,是错误的地址,我们就没有办法了。

3、最后百度看到img 有一个onerror属性,就可以完美解决上述的问题

<img class="studentImg" :src="reportMsg.userAvatarUrl" onerror="this.src = '../../../static/images/avaterSpaceMap.png'" />

相关前端的问题持续更新,小伙伴们相互关注,一同学习哦

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。