1

In my tag if the src returns a 404 then I can display a fallback image using directives, but if this fallback image is also returns 404 the how can I show another image using directive

Yogeshree Koyani
  • 1,649
  • 10
  • 19
Jojo
  • 403
  • 5
  • 16

2 Answers2

3

Create a directive to go through a series of error images and provide them one after the other.

You can provide alternative image urls in the tag itself.

<img fallbacksrc="http://url1/error.jpg,http://url2/error.jpg" src="http://url0.image.jpg">

Then write a directive for fallbacksrc and bind the tag for error event. Use split function to alternative images in to an array. You can then choose from this array inside the link function.

The information you are looking for is that the error event will occur any number of times as long as the src fails. So there is no limit for this to occur if all the images you are setting inside the directive fails continuously.

Here is a sample code. I'm using an array of error images in the scope itself in this example without providing them inside the tag. 

function MyCtrl($scope) {

       $scope.image = "http://greentreesarborcareinc.com/wp-content/uploads/2014/01/image-placeholder.jpg1"

        $scope.errorImageIdx = 0;
        $scope.errorImages = ["http://spanning.com/assets/uploads/images/11954453151817762013molumen_red_square_error_warning_icon.svg_.med_.png", "http://fivera.net/wp-content/uploads/2014/03/error_z0my4n.png"]
    }




myApp.directive('fallbacksrc', function() {

    return {
    link: function(scope, ele) {       

        ele.bind('error', function() {            

            if (scope.errorImageIdx <= scope.errorImages.length - 1) {                    
                angular.element(this).attr("src", scope.errorImages[scope.errorImageIdx]);
                scope.errorImageIdx++;
            }    
      });
    }
   }  

});

Here the tag will try to display the image referenced in $scope.image. But that is invalid. So, it tries to load the images from the array.

Try setting the first element of the array to something invalid. It will automatically select the second image in this case.

Charlie
  • 22,886
  • 11
  • 59
  • 90
  • This example was hugely helpful, here's my [Plunker](http://plnkr.co/edit/YEmDU8?p=info) for incorporating it into a web app that pulls recent news stories from FreeCodeCamp. Kind of hacked together but the spirit is there. – AtAFork Oct 23 '15 at 03:46
  • 1
    Nice. Good use of angular. One thing I noticed there was that it would be better if you not use separate `userz.html` - but include that template in `"text/ng-template"` script and use `ng-include` inside your `ng-repeat`. – Charlie Oct 23 '15 at 08:19
0

You can create angular directive like this -

app.directive('onError', function() {
      return {
        restrict:'A',
        link: function(scope, element, attr) {
          element.on('error', function() {
            element.attr('src', attr.onError);
          })
        }
      }
    });

And use like -

<img class="pic" on-error="default-image.jpg" ng-src="{{author.profileImageUrl}}">
Vaibhav Shah
  • 538
  • 3
  • 16