Condizione di ng-src AngularJS se non trovato (tramite l'url)

Question

Sto trasferendo un gruppo di immagini che ho archiviato localmente in una risorsa online che rimane aggiornata. Inizialmente, quando memorizzavo localmente le immagini, potevo usare la seguente condizione per le mie immagini.

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

Questo sarebbe afferrare il percorso immagine corrente in base a un nome, e se non esistesse sarebbe semplicemente restituire il percorso dell'immagine di /Content/champions/None.png

Ho pensato che questo avrebbe funzionato allo stesso modo tramite un URL. Quindi ho fatto la sintassi.

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

Quello che ho pensato si sarebbe verificato, è che se quanto sopra URL restituito 404 (Not Found), sarebbe di default di nuovo alla mia memoria locale per l'Nessuno immagine. Tuttavia, tenta comunque di visualizzare un'immagine online e mostra l'icona "immagine/immagine spezzata" anziché condizionare l'immagine "Nessuna" sul mio locale.

Come posso risolvere il problema? O perché Angular non risponde correttamente a questo scenario quando sta dicendo Non trovato 404 (Not Found)?

A volte si tenta di aggiungere la sintassi condizionata all'URL anziché riesaminare la directory home, potrebbe essere questo il problema? Ad esempio, a volte restituisce quanto segue anziché riavviare dalla mia cartella Contenuto. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

Answer 1

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

Questa costruzione sarebbe sostituire il vostro nome dell'immagine con 'None' solo quando l'immagine è null o undefined.

La direttiva angolare ngSrc non ha caratteristiche native per l'elaborazione della risposta 404.

Ma sarebbe stato risolto con la seguente direttiva 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"/> 

Per esempio a JSFiddle

Answer 2

Altra soluzione semplice è di utilizzare il codice seguente, che eseguono lo stesso risultato finale:

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

Answer 3

ho usato questo:

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

imgError() e imgLoaded() sono funzioni nel controller per questa pagina. Questa tecnica è particolarmente adatta ai miei scopi, perché in essa ho impostato una variabile scope per nascondere l'immagine interamente quando non è caricata, e la sostituisco con un messaggio di testo internazionalizzato sul fatto che l'immagine non è stata trovata.