angularjs顯示默認的圖像，如果原來不存在

我想告訴用戶圖像如果圖像存在，如：angularjs顯示默認的圖像，如果原來不存在

<img alt="user_image" src="/images/profile_images/{{result.image}}">

如果不可用，則應該顯示默認的圖像，就像用戶圖像

<img alt="user_image" src="/images/default_user.jpg">

如何通過html頁面中的angularjs來做到這一點？

來源

2015-02-05 Arvind Kushwaha

通過圖像不存在，你的意思是由服務器返回一個HTTP代碼404？如果是這樣，我不認爲這是可能的，因爲誰實際處理圖像是瀏覽器，Angular只是建立網址。你可以做的是讓Web服務器返回一個默認圖像，如果指定的圖像不存在。 – 2015-02-05 14:00:51

~~您可以到alt屬性的表達傳遞：~~

~~<img alt="{{user_image}}" src="/images/profile_images/{{result.image}}">~~

編輯：衛生署，誤解你的問題。在您的控制器（或將圖像提供給控制器的服務）中，可以將result.image設置爲用戶圖像或默認圖像。

另一種選擇是在NG-SRC使用條件邏輯：

<img ng-src="{{ result.image || 'default_user.jpg' }}"/>

這將設置src到result.image如果它存在，否則默認值。個人而言，我更喜歡第一種選擇，因爲它將邏輯放在視圖之外，但我敢打賭，你可以找到某個人認爲它屬於視圖，因爲它是視圖邏輯。

編輯2：這裏是一個plnkr：http://plnkr.co/edit/vfYU8T3PlzjQPxAaC5bK?p=preview

來源

2015-02-05 13:57:09 Noel

不，我想改變'src'的值而不是'alt'。我如何檢查{{result.image}}是否爲空或具有某些值..？ – 2015-02-05 14:02:47

查看已更新的答案。 – Noel 2015-02-05 14:25:57

如果'result.image == null'這個效果完美，但我認爲作者想知道服務器上存在的實際圖像 – 2015-09-17 14:54:42

您可以創建一個指令checkImage檢查圖像確實存在：

<img check-image ng-src="{{img}}" alt="Image" width="100%" >

指令：

myApp.directive('checkImage', function($http) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      attrs.$observe('ngSrc', function(ngSrc) { 
       $http.get(ngSrc).success(function(){ 
        alert('image exist'); 
       }).error(function(){ 
        alert('image not exist'); 
        element.attr('src', '/images/default_user.jpg'); // set default image 
       }); 
      }); 
     } 
    }; 
});

見演示http://jsfiddle.net/manzapanza/dtt1z5p8/

來源

2015-02-06 14:23:30 manzapanza

當我使用它時，它將始終設置默認圖像，即使我有一個來源，怎麼來？ – Lobato 2016-05-17 13:34:07

@ S.RLobato可能是因爲CORS問題，圖像是否與您正在加載腳本的域不同？ – Horse 2017-01-09 14:12:17

@SaaksshiTyagi：如果你認爲你有[更好的解決方案]（https://stackoverflow.com/review/suggested-edits/17252100），你應該把它作爲一個單獨的答案。 – 2017-09-06 14:45:46

App.directive('checkImage', function ($q) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     attrs.$observe('ngSrc', function (ngSrc) { 
      var deferred = $q.defer(); 
      var image = new Image(); 
      image.onerror = function() { 
       deferred.resolve(false); 
       element.attr('src', BASE_URL + '/assets/images/default_photo.png'); // set default image 
      }; 
      image.onload = function() { 
       deferred.resolve(true); 
      }; 
      image.src = ngSrc; 
      return deferred.promise; 
     }); 
    } 
};

}）;

來源

2015-08-14 09:05:54 Mehul

如果你可以添加一些解釋來支持這段代碼，那就太好了！ – 2015-08-14 09:21:43

前面提到的解決方案將使HTTP請求翻倍。每張圖片都會被加載兩次！

該解決方案不會重新加載圖像只是爲了看它是否存在：

myApp.directive('checkImage', function() { 
    return { 
     link: function(scope, element, attrs) { 
     element.bind('error', function() { 
      element.attr('src', '/images/default_user.jpg'); // set default image 
     }); 
     } 
    } 
});

來源

2015-11-12 08:38:13 mvermand

這將與角4一起工作？ – 2017-06-30 09:39:40

這是一個AngularJS指令，不會像Angular2/4那樣工作，但這個概念依然存在。您可以將此代碼移植到Angular代碼中。 – mvermand 2017-06-30 09:59:27

只是爲了好玩，角2是在路上。根據規範ngIf可以解決任何指令。不需要複雜的指令。建立一個類，檢查具有方法檢查圖像的結果對象是否存在於@manzapanza中。建立一個類定義如下：

<div *ngIf=result.isImageExists()> 
<img [src]="result.image" /> 
</div> 
<div *ngIf=!result.isImageExists()> 
<img [src]="result.defaultImage" /> 
</div>

我認爲新的角度更好，更清晰。希望幫助！;

來源

2016-08-10 18:22:11

如果使用離子2你可以試試這個，它的工作對我來說：

<img src="{{data.imgPath || 'assets/img/empty.png'}}" >

來源

2017-08-31 12:49:49

angularjs顯示默認的圖像，如果原來不存在

回答

相關問題