si un chemin ngSrc est résolu en 404, existe-t-il un moyen de revenir à un paramètre par défaut?

Question

L'application que je suis en train de construire requiert mon utilisateur de définir les 4 éléments d'information devant cette image a même une chance de chargement. Cette image est l'élément central de l'application, de sorte que la brisure du lien de l'image qui donne l'impression que le tout est complètement foireuse. J'aimerais avoir une autre image prendre sa place sur une page 404.

Des idées? J'aimerais éviter d'écrire une coutume directive pour cela.

J'ai été surpris de voir que je ne pouvais pas trouver la même question, surtout quand la première question dans les docs est la même!

http://docs.angularjs.org/api/ng.directive:ngSrc

Answer 1

Il est assez simple de la directive de regarder pour une erreur de chargement d'une image et de le remplacer par le src. (Plunker)

Html:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

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);
        }
      });
    }
  }
});

Si vous souhaitez afficher l'image d'erreur lors de l'ngSrc est vide, vous pouvez ajouter ce (Plunker):

attrs.$observe('ngSrc', function(value) {
  if (!value && attrs.errSrc) {
    attrs.$set('src', attrs.errSrc);
  }
});

Le problème est que ngSrc ne met pas à jour l'attribut src si la valeur est vide.

Answer 2

Peu en retard à la fête, mais je suis venu avec une solution à plus ou moins le même problème dans un système que je suis en train de construire.

Mon idée était, cependant, de traiter CHAQUE image img balise dans le monde.

Je ne voulais pas avoir à poivre mon HTML inutiles directives, telles que l' err-src ceux illustrés ici. Assez souvent, surtout avec des images dynamiques, vous ne savez pas si il est manquant jusqu'à ce qu'il soit trop tard. Ajout de directives sur la possibilité de l'image est manquante semble exagéré pour moi.

Au lieu de cela, j'ai d'étendre le img tag - qui, vraiment, est ce Angulaire directives.

- C'est ce que je suis venu avec.

Remarque: Cela nécessite la bibliothèque JQuery pour être présent et pas seulement la JQlite Angulaire est livré avec, parce que nous utilisons .error()

Vous pouvez le voir en action lors de cette Plunker

La directive ressemble plutôt à ceci:

app.directive('img', function () {
    return {
        restrict: 'E',        
        link: function (scope, element, attrs) {     
            // show an image-missing image
            element.error(function () {
                var w = element.width();
                var h = element.height();
                // using 20 here because it seems even a missing image will have ~18px width 
                // after this error function has been called
                if (w <= 20) { w = 100; }
                if (h <= 20) { h = 100; }
                var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=Oh No!';
                element.prop('src', url);
                element.css('border', 'double 3px #cccccc');
            });
        }
    }
});

Lorsqu'une erreur se produit (ce qui sera parce que l'image n'existe pas ou est inaccessible, etc) que l'on capture et de réagir. Vous pouvez tenter d'obtenir la taille d'une image trop s'ils étaient présents sur l'image/le style de la première place. Si non, alors vous fixer une valeur par défaut.

Cet exemple est à l'aide de placehold.pour une image à afficher à la place.

Maintenant, à CHAQUE image, indépendamment de l'utilisation d' src ou ng-src a lui-même couvert en cas rien de charges...

Answer 3

Pour étendre la solution de Jason afin d’attraper les deux cas d’erreur de chargement ou une chaîne source vide, nous pouvons simplement ajouter une surveillance.

Html:

 <img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />
 

Javascript:

 var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {

      scope.$watch(function() {
          return attrs['ngSrc'];
        }, function (value) {
          if (!value) {
            element.attr('src', attrs.errSrc);  
          }
      });

      element.bind('error', function() {
        element.attr('src', attrs.errSrc);
      });
    }
  }
});
 

Answer 4

Je suggère que vous pourriez utiliser l'Angulaire de l'INTERFACE utilisateur Utils "si la déclaration de la" directive pour résoudre votre problème, que l'on trouve à http://angular-ui.github.io/. J'ai juste utilisé pour faire exactement la même chose.

Ce n'est pas testée, mais vous pourriez faire quelque chose comme:

Contrôleur de code:

$scope.showImage = function () {
    if (value1 && value2 && value3 && value4) { 
        return true;
    } else {
        return false;
    }
};

(ou plus simple)

$scope.showImage = function () {
    return value1 && value2 && value3 && value4;
};

HTML: <img ui-if="showImage()" ng-src="images/{{data.value}}.jpg" />

Ou encore plus simple, vous pouvez simplement utiliser un champ d'application de la propriété:

Contrôleur de code:

$scope.showImage = value1 && value2 && value3 && value4;

HTML: <img ui-if="showImage" ng-src="images/{{data.value}}.jpg" />

Pour une image d'espace réservé, il suffit d'ajouter un autre similaire <img> tag, mais ajouter votre ui-if paramètre avec un point d'exclamation (!) marque, et soit faire ngSrc avoir le chemin d'accès à l'espace réservé d'image, ou tout simplement utiliser un src balise, comme la normale ol' HTML.

par exemple. <img ui-if="!showImage" src="images/placeholder.jpg" />

Évidemment, tous ces exemples de code sont en supposant que chacun de valeur1, valeur2, valeur3 et value4 équivalent à null / false lors de chacun de vos 4 informations sont incomplètes (et donc également une valeur booléenne true quand ils sont complets).

PS. Le AngularUI projet a été récemment brisé dans la sous-projets, et de la documentation pour ui-if semble être actuellement absent (c'est sans doute dans le paquet quelque part). Toutefois, il est assez simple à utiliser comme vous pouvez le voir, et j'ai connecté un Github 'problème' sur l'Angulaire de l'INTERFACE pour le point hors de l'équipe.

Mise à JOUR: 'ui-si' est absent de la AngularUI projet, car il a été intégré dans le noyau de l'AngularJS code! Seulement comme de v1.1.x si, qui est actuellement marqués comme "instables".

Answer 5

Est-il une raison spécifique, vous ne pouvez pas déclarer l'image de secours dans votre code?

Si je comprends bien, vous avez deux cas de figure possibles pour votre source de l'image:

1. Définir correctement les éléments d'information < 4 = image de remplacement.
2. Définir correctement les éléments d'information == 4 = URL Générée.

Je pense que cela devrait être géré par votre application - si l'URL est correcte ne peut pas être déterminé, au lieu de passer un temps de chargement/de secours/espace réservé à l'URL de l'image.

Le raisonnement est que vous n'avez jamais une "disparus" de l'image, parce que vous avez déclaré explicitement la bonne URL à afficher à tout point dans le temps.