Vue img图片加载不出来或加载错误显示默认图片
之前写页面考虑不到什么占位图,这次UI设计都有一个占位图,不得不逼着自己更准确的考虑图片显示错误时的情况!1、期初,想着用背景来填充,如果图片显示则就自然而然的把背景图遮盖住了,可实际情况是,如果后台返回的图片有误不显示时,背景图上面还是会有一个破损的小图片显示不美观;background: url("../../../static/images/avaterSpaceMap.png");b...
·
之前写页面考虑不到什么占位图,这次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'" />
相关前端的问题持续更新,小伙伴们相互关注,一同学习哦
更多推荐
已为社区贡献14条内容
所有评论(0)