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

图片链接为空时,显示默认图片

  • onerror
  • onerror指令封装
  • 偏方一 ng-if判断
  • 偏方二 三目运算判断
  • 偏方三 图片的background

onerror

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

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

onerror指令封装


<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图片路径为空 设置默认图片

你可能感兴趣的:(angular,工作记)