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

Solution 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.

Solution 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...

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

    }
  }
});

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

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

View more solutions

Comments

[will_hardin]

Sorry, I should've clarified that even if all 4 values are set, the URL can still 404 (the user can add folders along the way.) In the meantime I've added a function that checks the URL's response headers when all values are set. It still would be nice to handle this without special treatment, I bet I'll come across this again :)

[Alex Osborn]

Cool, you should show that as an answer and mark it as accepted for anyone searching in future.

[holographic-principle]

ng-if made it into the core btw (as of 1.1.5 if I am not mistaken).

[Stephen Patten]

Works well if the url is broken (404), but if it's an empty string ng-src silently swallows the error.

[alonisser]

Nice code, but seems an overkill to add a watch for what can be easily checked with ng-if in the template (the empty src string)

[Justin Lovero]

If an empty string is not valid for your model, then make it so that the expression you are binding to with ng-src does not return an empty string.

[Ryan Schumacher]

Updated script to support use of src attribute for the err-src image: plnkr.co/edit/b05WtghBOHkxKdttZ8q5

[Jason Goemaat]

Seems like you could just replace ngSrc with your own directive and have it set up the bind on error to use errSrc instead of having a separate errSrc directive if that's what you want. You could use attrs.$observe('ngSrc', function(value) {...});, that's what ngSrc uses internally instead of $watch

[Jason Goemaat]

The whole problem with blanks is because ngSrc doesn't update the src attribute if the value is blank, so if you had your own directive replacing ngSrc it wouldn't need a blank check.

[Matthijs]

very nice solution ! let's vote this one to the top !

[Jason Goemaat]

@JustinLovero I consider it a bug in angular and reported it. The problem is that ngSrc will not set the src attribute if the value is blank. That could actually be a problem if for instance you are displaying a phone and load another phone with ajax that is missing an image url. The old phone's image would continue being displayed, but I think an error or placeholder would be more appropriate. Yes you could handle it in your model but the behavior of leaving an old image is, I think, more wrong than displaying an error.

[simeg]

@JasonGoemaat, how would I do to replace the broken image with text?

[Ivan Carosati]

If the err-src return a 404, the code just keep cycling causing thousands of error in console.. Any idea?

[user2899845]

@Pokono - it may keep cycling if the link to the substitute image you provided isn't available. Does it help?

[Ivan Carosati]

Yes, exactly. I believe that should stop though. Does anyone can think of a fix?

[user2899845]

@Pokono - you can check inside the error function whether the current 'src' attribute is the same as 'errSrc'.

[James Gentes]

No, if p.image returns a 404 on an AJAX call, it will treat that as 'true' and not move on to the second img/no-image.png.

[James Gentes]

This is correct, as it evaluates "team.logo" as a string (true/false) whereas ng-src will see {{team.logo}} as true even if it returns a 404.

[Pompey]

This is quite beautiful I have to say. I actually don't want any image to show at all if it doesn't resolve so I used: element.css("display", "none"); to just hide it totally

[Darren Wainwright]

nice :) or you could simply remove it from the DOM altogether, with element.remove(); :)

[shanemgrey]

@JamesGentes - That doesn't seem to be the case. This use of ng-src works for me exactly as shown. And it's so much simpler.

[James Gentes]

@shaneveeg thanks, that's interesting - I wonder if the back end is what's different. I am running Node with Express, perhaps it handles it differently.

[shanemgrey]

@JamesGentes - Correction of my previous comment. The OP is looking for a solution when there is a valid URI returned by the model, but a 404 when it's followed. In that case, this solution does not work, it results in broken image. If angular returns nothing for the image value, this correctly chooses the fallback.

[NeoNe]

Im using Laravel and it works perfect for me if 404, null or empty is the case. but maybe Express returns some kind of error instead of code response like 404 so yes probably depends of server framework

[mggSoft]

Also works fine putting err-src value empty: <img ng-src="smiley.png" err-src="" />

[aUXcoder]

Darren made a good point: "handle EVERY image img tag globally". In my opinion the ideal solution will handle this without need err-src at all. I would like a mix with both solutions. What do you think?

[Simon H]

Anyway I can get this to stop logging the 404s to the console?

[Ruben.Canton]

This may be correct when you have the image data directly (as it looks like it's doing: p.img and not p.imgUrl). But if you set the URL and server returns code 404 then this doesn't seem to work, not to me at least. I'm on IIS7 and it's returning an HTTP 404 standard response -> HTTP/1.1 404 Not Found

[CodeMed]

This should be the accepted answer because it puts all the code into a single line. +1 because google searchers are looking for this answer, not the more complex overkill approaches.

[ecorvo]

Works great, Thanks!

[andrfas]

Edited a bit your solution, so it works also when path is empty. stackoverflow.com/a/35884288/2014288

[Nick Steele]

You can actually do this without watching anything, or without Angular or javascript... just wrap the image in an object tag first and it works as far back as IE8 (before Angular)... stackoverflow.com/questions/22051573/…

[Jay Shukla]

@Darren How can I handle the same in ng-srcset? I can see that in ng-src it will have my default image url only. However I've couple of different copies of the same image so I want to check if the srcset candidate picked up by browser is 404 then I want to load image myself with some centralize approach.

[Darren Wainwright]

@JayShukla - not sure off the top of my head; don't fully understand what you're hoping to achieve. Perhaps best to write a new question.

[Gregra]

I feel this should be the accepted answer since it doesn't use jQuery and solves the problem

[Biswas Khayargoli]

If I am adding this to lot of images in a loop, isn't this expensive?

[user2899845]

@BiswasKhayargoli - added a call to unsubscribe, so it will not have any processing cost after the initial loading