Gibt es eine Möglichkeit, auf einen Standard zurückzugreifen, wenn ein ngSrc-Pfad in einen 404-Pfad aufgelöst wird?

Für die Anwendung, die ich erstelle, muss mein Benutzer 4 Informationen festlegen, bevor dieses Bild überhaupt geladen werden kann. Dieses Bild ist das Herzstück der Anwendung, sodass der fehlerhafte Bildlink den Eindruck erweckt, dass das Ganze verfälscht ist. Ich hätte gerne ein anderes Bild auf einer 404.

Irgendwelche Ideen? Ich möchte vermeiden, eine benutzerdefinierte Direktive dafür zu schreiben.

Ich war überrascht, dass ich keine ähnliche Frage finden konnte, besonders wenn die erste Frage in den Dokumenten dieselbe ist!

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

Es ist eine ziemlich einfache Anweisung, auf einen Fehler beim Laden eines Bildes zu achten und den src zu ersetzen. (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);
        }
      });
    }
  }
});

Wenn Sie das Fehlerbild anzeigen möchten, wenn ngSrc leer ist, können Sie Folgendes hinzufügen (Plunker) :

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

Das Problem ist, dass ngSrc das src-Attribut nicht aktualisiert, wenn der Wert leer ist.

Wenig spät zur Party, obwohl ich eine Lösung für mehr oder weniger das gleiche Problem in einem System gefunden habe, das ich baue.

Meine Idee war jedoch, JEDES Bild- imgTag global zu handhaben .

Ich wollte meine nicht HTMLmit unnötigen Anweisungen wie den err-srchier gezeigten überhäufen müssen. Sehr oft, besonders bei dynamischen Bildern, werden Sie nicht wissen, ob es fehlt, bis es zu spät ist. Das Hinzufügen zusätzlicher Anweisungen für die Möglichkeit, dass ein Bild fehlt, scheint mir übertrieben.

Stattdessen erweitere ich das vorhandene imgTag - worum es bei Angular-Direktiven eigentlich geht.

Also - das habe ich mir ausgedacht.

Hinweis : Dies setzt voraus, dass die vollständige JQuery-Bibliothek vorhanden ist und nicht nur die JQlite Angular-Bibliothek, mit der wir arbeiten.error()

Sie können es in Aktion an diesem Plunker sehen

Die Richtlinie sieht ungefähr so ​​aus:

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

Wenn ein Fehler auftritt (weil das Bild nicht existiert oder nicht erreichbar ist usw.), erfassen wir und reagieren. Sie können auch versuchen, die Bildgrößen zu ermitteln - wenn sie überhaupt auf dem Bild / Stil vorhanden waren. Wenn nicht, setzen Sie sich einen Standard.

In diesem Beispiel wird placehold.it verwendet, damit stattdessen ein Bild angezeigt wird.

Jetzt JEDES Bild, unabhängig von der Verwendung srcoder ng-srchat sich selbst abgedeckt, falls nichts geladen wird ...

Um die Jason-Lösung zu erweitern und beide Fälle eines Ladefehlers oder einer leeren Quellzeichenfolge abzufangen, können wir einfach eine Uhr hinzufügen.

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) {

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

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

      //unsubscribe on success
      element.bind('load', watcher);

    }
  }
});

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

in HTML:

<img class="img-circle" check-image ng-src="{{item.profileImg}}" />

Wenn image 404 ist oder image null leer ist, was auch immer keine Anweisungen erforderlich sind, können Sie einfach den ng-src-Filter wie diesen verwenden :)

<img ng-src="{{ p.image || 'img/no-image.png' }}" />

Ich benutze so etwas, aber es setzt voraus, dass team.logo gültig ist. Es erzwingt die Standardeinstellung, wenn "team.logo" nicht festgelegt oder leer ist.

<img ng-if="team.logo" ng-src="https://api.example.com/images/{{team.logo}}">
<img ng-hide="team.logo" ng-src="img/default.png">

Sie brauchen dafür weder Winkel noch CSS oder JS. Wenn Sie möchten, können Sie diese Antwort (verknüpft) in eine einfache Anweisung einschließen, um sie einfacher zu machen, wie oder so, aber es ist ein ziemlich einfacher Vorgang ... wickeln Sie sie einfach in ein Objekt-Tag ein ...

So verbergen Sie ein Bild mit einem fehlerhaften Symbol nur mit CSS / HTML (ohne js)

Gibt es einen bestimmten Grund, warum Sie das Fallback-Image in Ihrem Code nicht deklarieren können?

Soweit ich weiß, haben Sie zwei mögliche Fälle für Ihre Bildquelle:

1. Stellen Sie die Informationen richtig ein <4 = Fallback-Bild.
2. Richtig eingestellte Informationen == 4 = Generierte URL.

Ich denke, dies sollte von Ihrer App erledigt werden. Wenn die richtige URL derzeit nicht ermittelt werden kann, übergeben Sie stattdessen eine URL für das Laden / Fallback / Platzhalterbild.

Der Grund dafür ist, dass Sie nie ein "fehlendes" Bild haben, da Sie explizit die richtige URL angegeben haben, die zu jedem Zeitpunkt angezeigt werden soll.

Ich schlage vor, dass Sie die Anweisung if if der Angular UI Utils verwenden möchten, um Ihr Problem zu lösen. Diese finden Sie unter http://angular-ui.github.io/. . Ich habe es gerade benutzt, um genau das Gleiche zu tun.

Dies ist ungetestet, aber Sie könnten etwas tun wie:

Controller-Code:

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

(oder einfacher)

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

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

Oder noch einfacher: Sie können einfach eine Scope-Eigenschaft verwenden:

Controller-Code:

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

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

<img>Fügen Sie für ein Platzhalterbild einfach ein anderes ähnliches Tag hinzu, stellen Sie Ihrem ui-ifParameter jedoch ein Ausrufezeichen ( !) voran, und lassen Sie ngSrc entweder den Pfad zum Platzhalterbild haben, oder verwenden Sie einfach ein srcTag gemäß dem normalen alten HTML- Code .

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

Offensichtlich gehen alle oben genannten Codebeispiele davon aus, dass jeder von Wert1, Wert2, Wert3 und Wert4 gleich null/ ist, falsewenn jede Ihrer 4 Informationen unvollständig ist (und somit auch einem booleschen Wert vontrue wenn sie vollständig sind).

PS. Das AngularUI-Projekt wurde kürzlich in Unterprojekte unterteilt, und die Dokumentation für ui-ifscheint derzeit zu fehlen (wahrscheinlich ist sie jedoch irgendwo im Paket enthalten). Wie Sie sehen, ist die Verwendung jedoch recht einfach, und ich habe ein Github-Problem im Angular UI-Projekt protokolliert, um das Team darauf aufmerksam zu machen.

UPDATE: 'ui-if' fehlt im AngularUI-Projekt, da es in den AngularJS-Kerncode integriert wurde! Nur ab Version 1.1.x, die derzeit als 'instabil' markiert ist.

Hier ist eine Lösung, die ich mit nativem Javascript gefunden habe. Ich überprüfe, ob das Bild beschädigt ist, füge dem Bild für alle Fälle eine Klasse hinzu und ändere die Quelle.

Ich habe einen Teil meiner Antwort von einer Quora-Antwort erhalten: http://www.quora.com/How-do-I-use-JavaScript-to-find-if-an-image-is-broken

app.directive('imageErrorDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element[0].onerror = function () {
                element[0].className = element[0].className + " image-error";
                element[0].src = 'http://img3.wikia.nocookie.net/__cb20140329055736/pokemon/images/c/c9/702Dedenne.png';
            };
        }
    }
});

Kam mit meiner eigenen Lösung. Es ersetzt das Image sowohl, wenn src oder ngSrc leer sind, als auch wenn img 404 zurückgibt.

(Gabel der @ Darren-Lösung)

directive('img', function () {
return {
    restrict: 'E',        
    link: function (scope, element, attrs) {   
        if((('ngSrc' in attrs) && typeof(attrs['ngSrc'])==='undefined') || (('src' in attrs) && typeof(attrs['src'])==='undefined')) {
            (function () {
                replaceImg();
            })();
        };
        element.error(function () {
            replaceImg();
        });

        function replaceImg() {
            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=No image';
            element.prop('src', url);
        }
    }
}
});

Dadurch kann nur zweimal eine Schleife ausgeführt werden. Um zu überprüfen, ob ng-src nicht vorhanden ist, verwenden Sie err-src. Dadurch wird verhindert, dass die Schleife fortgesetzt wird.

(function () {
    'use strict';
    angular.module('pilierApp').directive('errSrc', errSrc);

    function errSrc() {
        return {
            link: function(scope, element, attrs) {
             element.error(function () {
                // to prevent looping error check if src == ngSrc
                if (element.prop('src')==attrs.ngSrc){
                     //stop loop here
                     element.prop('src', attrs.errSrc);
                }              
            });
            }
        }
    }
})();