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'" />

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