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”