Stan AngularJS ng-src, jeśli nie został znaleziony (przez URL)

Question

Przesyłam garść obrazów, które zapisałem lokalnie do zasobu online, który pozostaje aktualny. Oryginalnie, gdy zapisałem obrazy lokalnie, mogłem użyć następującego warunku dla moich obrazów.

<img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png" 

To chwycić aktualną ścieżkę obrazu w oparciu off nazwę, a jeśli nie istnieje to po prostu wrócić na ścieżkę obrazu /Content/champions/None.png

wyobraziłem to będzie działać w ten sam sposób za pomocą adresu URL. Tak więc stworzyłem składnię.

<img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
|| 
'/Content/champions/None'}}.png" 

Co Przypuszczałem nastąpiłoby to, że jeśli powyższy URL wrócił 404 (Not Found), to domyślnie z powrotem do mojego lokalnego przechowywania na Brak obrazu. Nadal jednak próbuje wyświetlić obraz online i wyświetla ikonę "zepsutego obrazu/obrazu" zamiast warunkowania na moim lokalnym obrazie "Brak".

Jak mogę to naprawić? Albo dlaczego Angular nie reaguje poprawnie na ten scenariusz, gdy mówi "Nie znaleziono" 404 (Not Found)?

Czasami próbuje dodać zmienioną składnię do adresu URL, zamiast ponownie szukać w katalogu domowym, czy to może być problem? Czasami w moim folderze Treść zwracane są następujące elementy zamiast ponownie uruchamiać. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

Answer 1

{{Champions1[champ1-1].cName || 'None'}} 

Konstrukcja ta zastąpi nazwę obrazu z 'None' tylko wtedy, gdy obraz jest null lub undefined.

Dyrektywa kątowa ngSrc nie ma żadnych natywnych funkcji do przetwarzania odpowiedzi 404.

Ale zostanie to naprawione zgodnie z następującą dyrektywą onErrorSrc.

var myApp = angular.module('myApp',[]); 

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

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/> 

Patrz przykład na JSFiddle

Answer 2

Inne proste rozwiązania jest użyć tego kodu, które wykonują ten sam rezultat końcowy:

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/> 

Answer 3

że stosowane to:

  <img ng-src="{{ '/api/whatever/' + id + '/image/' }}" 
       onerror="angular.element(this).scope().imgError()" 
       onload="angular.element(this).scope().imgLoaded()" /> 

imgError() i imgLoaded() są funkcjami kontrolera dla tej strony. Ta technika jest szczególnie odpowiednia do moich celów, ponieważ w niej ustawiam zmienną zasięgu, aby całkowicie ukryć obraz, gdy nie jest on załadowany, i zastąpię go umiędzynarodowioną wiadomością tekstową o tym, że obraz nie został znaleziony.