Create a nested fallback src for an Image using angularjs directive

Question

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

@KevinFriedheim Im looking for any solution using angularjs directives — Jojo
– Jojo, Commented Oct 13, 2015 at 6:12

Charlie · Accepted Answer · 2015-10-13 06:40:38Z

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.

edited Oct 13, 2015 at 6:40

answered Oct 13, 2015 at 6:32

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AtAFork Over a year ago

This example was hugely helpful, here's my Plunker for incorporating it into a web app that pulls recent news stories from FreeCodeCamp. Kind of hacked together but the spirit is there.

Charlie Over a year ago

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.

Vaibhav Shah · Accepted Answer · 2015-10-13 05:42:30Z

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

answered Oct 13, 2015 at 5:42

Vaibhav Shah

5283 silver badges17 bronze badges

2 Comments

Charlie Over a year ago

This is not what he has asked. He says in his question that he already knows how to do this.

Jojo Over a year ago

is there any way way to load another image if on-error also returns 404

Collectives™ on Stack Overflow

Create a nested fallback src for an Image using angularjs directive

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related