【angular】angular里处理图片成功加载前的默认图片显示问题

onerror

img标签支持onerror 事件。在加载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片

<img ng-src="{{imgUrl}}" src="" onerror="this.src='res/default-img.png'" alt="风景照"/>

onerror指令封装

<!-- src="" 不可省略 -->
<img ng-src="{{imgUrl}}" src="" err-src="res/default-img.png"  alt="风景照"/>

.directive('errSrc', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('error', function () {
                if (attrs.src != attrs.errSrc) {
                    attrs.$set('src', attrs.errSrc);
                }
            });
        }
    };
})

参考链接: img标签的onerror事件

---

除了onerror方法之外，懒人可用偏方

偏方一 ng-if判断

<div>
     <img ng-if="imgUrl" ng-src="{{imgUrl}}"/>
     <img ng-if="!imgUrl" src="res/default-img.png"/>
</div>

偏方二 三目运算判断

<img ng-src={{imgUrl?imgUrl:defaultImage}} alt="风景照">

偏方三 图片的background

// 当所需加载的图片不透明时，可设置图片的默认背景图片或默认背景颜色
img{
	background-image: url('res/default-img.png');
	background-color: #7cbaec;
    background-size: 100% 100%;
    width: 80px;
    height: 80px
}

原文链接：angular—— 当ng-src图片路径为空 设置默认图片