web-dev-qa-db-fra.com

État AngularJS ng-src si introuvable (via URL)

Je porte une série d'images que j'ai stockées localement sur une ressource en ligne qui reste à jour. À l'origine, lorsque je stockais les images localement, je pouvais utiliser la condition suivante pour mes images.

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

Cela capturerait le chemin d’image actuel basé sur un nom, et s’il n’existait pas, il renverrait simplement le chemin d’image de /Content/champions/None.png

J'ai pensé que cela fonctionnerait de la même manière via une URL. Alors j'ai fait la syntaxe.

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

Ce que j'ai supposé se produirait, c'est que si l'URL ci-dessus renvoyait 404 (Not Found), il reviendrait par défaut à mon stockage local pour l'image Aucun. Cependant, il essaie toujours d'afficher une image en ligne et affiche l'icône "image/image brisée" plutôt que de conditionner l'image "Aucune" de mon image locale.

Comment pourrais-je résoudre ce problème? Ou pourquoi Angular ne répond pas correctement à ce scénario quand il dit Not Found 404 (Not Found)?

Parfois, il essaie d'ajouter la syntaxe conditionnée à l'URL plutôt que de chercher dans le répertoire de base. Cela pourrait-il être le problème? c’est-à-dire qu’il renvoie parfois ce qui suit plutôt que de redémarrer à partir de mon dossier Contenu. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

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

Cette construction remplacerait le nom de votre image par 'None' uniquement lorsque votre image est nulle ou non définie.

La directive angulaire ngSrc ne possède aucune fonctionnalité native pour le traitement de la réponse 404.

Mais cela serait corrigé avec la directive onErrorSrc suivante.

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"/>

Voir exemple sur JSFiddle

41
Artyom Pranovich

Une autre solution simple consiste à utiliser le code suivant, qui produit le même résultat final:

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>
27
João Paulo Cercal

J'ai utilisé ceci:

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

imgError () et imgLoaded () sont des fonctions dans le contrôleur pour cette page. Cette technique convient particulièrement à mes besoins, car elle définit une variable d’étendue pour masquer entièrement l’image lorsqu'elle n'est pas chargée et la remplace par un message texte internationalisé indiquant que l'image n'est pas trouvée.

7
CreamOfMushroom

Autre possibilité d'appeler une fonction sur votre Javascript

<img ng-src="{{yourImageCurrentScopeVar}}" onerror="myFunction(this)"/>

<script>
function myFunction(event) {
event.src = "./Static/app/img/by_default_picture.png";
event.onerror = '';
};
</script>
0
SIDH