se un percorso ngSrc si risolve in un 404, c'è un modo per ripristinare un valore predefinito?

L'applicazione che sto creando richiede che il mio utente imposti 4 informazioni prima che questa immagine abbia persino la possibilità di essere caricata. Questa immagine è l'elemento centrale dell'applicazione, quindi il collegamento all'immagine interrotto fa sembrare che tutto sia bloccato. Vorrei che un'altra immagine prendesse il suo posto su una 404.

Qualche idea? Vorrei evitare di scrivere una direttiva personalizzata per questo.

Sono stato sorpreso di non riuscire a trovare una domanda simile, soprattutto quando la prima domanda nei documenti è la stessa!

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

È una direttiva piuttosto semplice da guardare per un errore nel caricamento di un'immagine e per sostituire l'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);
        }
      });
    }
  }
});

Se si desidera visualizzare l'immagine di errore quando ngSrc è vuoto, è possibile aggiungere questo (Plunker) :

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

Il problema è che ngSrc non aggiorna l'attributo src se il valore è vuoto.

Poco tardi alla festa, anche se ho trovato una soluzione a più o meno lo stesso problema in un sistema che sto costruendo.

La mia idea era, tuttavia, quella di gestire OGNI imgtag immagine a livello globale.

Non volevo esagerare HTMLcon direttive inutili, come err-srcquelle mostrate qui. Abbastanza spesso, specialmente con immagini dinamiche, non saprai se manca fino a quando è troppo tardi. L'aggiunta di direttive extra sul caso che manca a un'immagine mi sembra eccessivo.

Invece, estendo il imgtag esistente - che, in realtà, è ciò di cui tratta le direttive angolari.

Quindi - questo è quello che mi è venuto in mente.

Nota : ciò richiede la presenza della libreria JQuery completa e non solo della JQlite Angular perché stiamo usando.error()

Puoi vederlo in azione in questo Plunker

La direttiva si presenta in questo modo:

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

Quando si verifica un errore (che sarà dovuto al fatto che l'immagine non esiste o è irraggiungibile ecc.) Catturiamo e reagiamo. Puoi anche tentare di ottenere le dimensioni dell'immagine, in primo luogo se erano presenti sull'immagine / stile. In caso contrario, imposta te stesso un valore predefinito.

Questo esempio usa invece placehold.it per mostrare un'immagine.

Ora OGNI immagine, indipendentemente dall'uso srco si ng-srcè coperta nel caso in cui nulla si carichi ...

Per espandere la soluzione Jason in modo da rilevare entrambi i casi di errore di caricamento o una stringa di origine vuota, possiamo semplicemente aggiungere un watch.

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

Se l'immagine è 404 o l'immagine è nulla vuota qualunque cosa non sia necessaria per le direttive puoi semplicemente usare il filtro ng-src come questo :)

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

Uso qualcosa del genere, ma presuppone che team.logo sia valido. Forza l'impostazione predefinita se "team.logo" non è impostato o è vuoto.

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

Non hai bisogno di angolare per quello, o anche CSS o JS. Se vuoi, puoi racchiudere questa risposta (collegata) in una semplice direttiva per renderla più semplice, simile o qualcosa del genere, ma è un processo piuttosto semplice ... basta avvolgerla in un tag oggetto ...

Come nascondere l'icona spezzata dell'immagine usando solo CSS / HTML (senza js)

C'è un motivo specifico per cui non puoi dichiarare l'immagine di fallback nel tuo codice?

A quanto ho capito, hai due possibili casi per la tua fonte di immagini:

1. Impostare correttamente le informazioni <4 = Immagine di fallback.
2. Imposta correttamente le informazioni == 4 = URL generato.

Penso che questo dovrebbe essere gestito dalla tua app - se attualmente non è possibile determinare l'URL corretto, passa invece un URL di immagine di caricamento / fallback / segnaposto.

Il ragionamento è che non hai mai un'immagine "mancante", perché hai esplicitamente dichiarato l'URL corretto da visualizzare in qualsiasi momento.

Ti suggerisco di utilizzare la direttiva "if statement" di Angular UI Utils per risolvere il tuo problema, come si trova su http://angular-ui.github.io/ . L'ho appena usato per fare esattamente la stessa cosa.

Questo non è testato, ma potresti fare qualcosa del tipo:

Codice controller:

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

(o più semplice)

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

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

O ancora più semplice, potresti semplicemente usare una proprietà scope:

Codice controller:

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

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

Per un'immagine segnaposto, basta aggiungere un altro <img>tag simile ma anteporre il ui-ifparametro con un punto esclamativo ( !) e fare in modo che ngSrc abbia il percorso dell'immagine del segnaposto o utilizzare semplicemente un srctag come nel normale vecchio HTML.

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

Ovviamente, tutti i precedenti esempi di codice presuppongono che ciascuno di value1, value2, value3 e value4 corrisponderà a null/ falsequando ognuna delle tue 4 informazioni è incompleta (e quindi anche a un valore booleano di truequando sono complete).

PS. Il progetto AngularUI è stato recentemente suddiviso in sottoprogetti e la documentazione per ui-ifsembra attualmente mancare (probabilmente è nel pacchetto da qualche parte). Tuttavia, è piuttosto semplice da usare come puoi vedere, e ho registrato un "problema" di Github sul progetto dell'interfaccia utente angolare per segnalarlo anche al team.

AGGIORNAMENTO: "ui-if" non è presente nel progetto AngularUI perché è stato integrato nel codice AngularJS principale! Solo a partire da v1.1.x, che è attualmente contrassegnato come 'instabile'.

Ecco una soluzione che mi è venuta in mente usando JavaScript nativo. Sto verificando se l'immagine è rotta, quindi aggiungo una classe all'immagine per ogni evenienza e cambio l'origine.

Ho ricevuto parte della mia risposta da una risposta di Quora 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';
            };
        }
    }
});

È venuto con la mia soluzione. Sostituisce l'immagine sia se src o ngSrc è vuoto e se img restituisce 404.

(fork della soluzione @Darren)

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

Ciò consentirà solo di eseguire il ciclo due volte, per verificare se ng-src non esiste altrimenti utilizzare err-src, questo impedisce il ciclo continuo.

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