之前写页面考虑不到什么占位图,这次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'" />

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

Logo

前往低代码交流专区

更多推荐