if a ngSrc path resolves to a 404, is there a way to fallback to a default?

Question

The application I'm building requires my user to set 4 pieces of information before this image even has a chance of loading. This image is the center-piece of the application, so the broken image link makes it look like the whole thing is borked. I'd like to have another image take its place on a 404.

Any ideas? I'd like to avoid writing a custom directive for this.

I was surprised that I couldn't find a similar question, especially when the first question in the docs is the same one!

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

Answer 1

It's a pretty simple directive to watch for an error loading an image and to replace the 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);
        }
      });
    }
  }
});

If you want to display the error image when ngSrc is blank you can add this (Plunker):

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

The problem is that ngSrc doesn't update the src attribute if the value is blank.

Answer 2

Little late to the party, though I came up with a solution to more or less the same issue in a system I'm building.

My idea was, though, to handle EVERY image img tag globally.

I didn't want to have to pepper my HTML with unnecessary directives, such as the err-src ones shown here. Quite often, especially with dynamic images, you won't know if it's missing until its too late. Adding extra directives on the off-chance an image is missing seems overkill to me.

Instead, I extend the existing img tag - which, really, is what Angular directives are all about.

So - this is what I came up with.

Note: This requires the full JQuery library to be present and not just the JQlite Angular ships with because we're using .error()

You can see it in action at this Plunker

The directive looks pretty much like this:

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

When an error occurs (which will be because the image doesn't exist or is unreachable etc) we capture and react. You can attempt to get the image sizes too - if they were present on the image/style in the first place. If not, then set yourself a default.

This example is using placehold.it for an image to show instead.

Now EVERY image, regardless of using src or ng-src has itself covered in case nothing loads up...

Answer 3

To expand Jason solution to catch both cases of a loading error or an empty source string, we can just add a 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);

    }
  }
});

Answer 4

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

Answer 5

If image is 404 or image is null empty whatever there is no need for directives you can simply use ng-src filter like this :)

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

Answer 6

I use something like this, but it assumes that team.logo is valid. It forces default if "team.logo" isn't set or is empty.

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

Answer 7

You don't need angular for that, or even CSS or JS. If you want, you can wrap this answer (linked) in a simple directive to make it simpler, like or something, but it's a pretty simple process... just wrap it in an object tag...

How to hide image broken Icon using only CSS/HTML (without js)

Answer 8

Is there a specific reason you can't declare the fallback image in your code?

As I understand, you have two possible cases for your image source:

1. Correctly set pieces of information < 4 = Fallback image.
2. Correctly set pieces of information == 4 = Generated URL.

I think this should be handled by your app - if the correct URL cannot currently be determined, instead pass a loading/fallback/placeholder image URL.

The reasoning is that you never have a 'missing' image, because you have explicitly declared the correct URL to display at any point in time.

Answer 9

I suggest that you might like to use the Angular UI Utils 'if statement' directive to solve your problem, as found at http://angular-ui.github.io/. I have just used it to do exactly the same thing.

This is untested, but you could do something like:

Controller code:

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

(or simpler)

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

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

Or even simpler, you could just use a scope property:

Controller code:

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

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

For a placeholder image, just add another similar <img> tag but prepend your ui-if parameter with an exclamation (!) mark, and either make ngSrc have the path to the placeholder image, or just use a src tag as per normal ol' HTML.

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

Obviously, all of the above code samples are assuming that each of value1, value2, value3 and value4 will equate to null / false when each of your 4 pieces of information are incomplete (and thus also to a boolean value of true when they are complete).

PS. The AngularUI project has recently been broken in to sub-projects, and the documentation for ui-if seems to be missing currently (it's probably in the package somewhere though). However, it is pretty straightforward to use as you can see, and I have logged a Github 'issue' on the Angular UI project to point it out to the team too.

UPDATE: 'ui-if' is missing from the AngularUI project because it's been integrated in to the core AngularJS code! Only as of v1.1.x though, which is currently marked as 'unstable'.

Answer 10

Here's a solution I came up with using native javascript. I'm checking if the image is broken then adding a class to the image just in case and changing the source.

I got part of my answer from a Quora answer 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';
            };
        }
    }
});

Answer 11

Came up with my own solution. It replaces image both if src or ngSrc is empty, and if img returns 404.

(fork of @Darren solution)

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

Answer 12

This will allow only to loop twice, to check if the ng-src doesn't exist else use the err-src, this prevents the continues looping.

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

Answer 13

This is a solution to your problem Do this in your component.html

<img [src]="imageUrl" (error)="handleError()">

in your component.ts file

defaultImageUrl = '/assets/default-image.png';
imageUrl = 'https://example.com/actual-image.png';

create a function inside the component.ts file

handleError() {
   this.imageUrl = this.defaultImageUrl;
}

this will solve your issues for you