1

I am displaying a bunch of images in some gallery. Whenever an image is not found, I replace it with a "fallback" image. Now whenever an image is not found, it will write a console error that the image is not found before replacing it with the fallback.

Any way I can avoid the error? When displaying 100+ images, my entire console log gets filled with errors.

Here is my template:

<img ng-src="{{profileImageUrl}}" fallback-src="img/default-placeholder.png" />

And the directive:

myAppDirectives.directive('fallbackSrc', function () {
    var fallbackSrc = {
        link: function postLink(scope, iElement, iAttrs) {
            iElement.bind('error', function() {
                angular.element(this).attr("src", iAttrs.fallbackSrc);
            });
        }
    }
    return fallbackSrc;
});

The error I'm getting is a 404 not found for every image that's not available (the site took it down for example)

AlexD
  • 4,062
  • 5
  • 38
  • 65
  • 2
    Nothing on you can in your code to hide this. If you are trying to load an image, and it gives you a 404, it is an error and Chrome will report it. However, looks like you can filter your console's output now, see this post for more details: http://stackoverflow.com/questions/14337351/can-i-prevent-the-chrome-developer-tools-console-from-logging-image-404-errors – jValdron Sep 24 '15 at 12:27

1 Answers1

2

Using ng-src to resolve this issue

<img ng-src="{{image.url}}" />
user1438038
  • 5,821
  • 6
  • 60
  • 94
HDT
  • 2,017
  • 20
  • 32
  • 1
    Please make sure you configured correctly the fallback-src. I believe that if it's correct, there will be no error occurs. Also see http://jsfiddle.net/FdKKf/ .It worked well without logging in console. – HDT Dec 17 '15 at 13:13
  • In your fiddle, I got this in my console for the http://sdfsfsd image: Failed to load resource: net::ERR_NAME_NOT_RESOLVED – Robycool May 25 '18 at 08:18