AngularJS中如果ng-src 图片加载失败怎么办

 

我们知道AngularJS加载图片的方法是用技术分享加ng-src标签，例如：

<img ng-src="{{currentUrl}}"/>
 

其中currentUrl为图片地址，如果图片正常能显示，那这么使用一点问题没有，但是，如果图片加载失败了（例如该图片已经不存在，从而出现404错误），在该放图片的地方就会出现一个难看的图片加载失败图标，如果想把这个图标换成你自定义的图片，可以如下这么做： 
HTML:

<img ng-src="{{currentUrl}}" err-src="img/404.jpg"/>
 

Javascript:

var app = angular.module("MyApp", []);

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

 

这样一来，就把错误图标换成了你自己指定的”img/404.jpg”