How to check remote image exists in angularjs?

Question

Below is the code :

<div ng-repeat="u in users">
<!--I will always receive a URL -->
<div ng-if="u.imageUrl"> <!--Here I want to check if the provided URL is active-->
 <!--Only seen if image url is live and active -->
</div>
<div>
<!--do some other things-->
</div>
</div>

e.g. : http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png is active URL but http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder11.png is not. Also users may have many records as signin increases.

angular-img-fallback could this be something that you are looking? — Shih-Min Lee
– Shih-Min Lee, Commented Mar 22, 2016 at 7:56
If I'm correct angular-image-fallback is used to show alternate image. But I straightforwardly don't want to show that div. — Hashir Hussain
– Hashir Hussain, Commented Mar 22, 2016 at 7:58
dont know if this would work but maybe fallback to 1x1 pixel image? — Shih-Min Lee
– Shih-Min Lee, Commented Mar 22, 2016 at 8:03

michelem · Accepted Answer · 2017-04-11 10:00:00Z

1

You can do that with a directive:

Here is the JSFiddle

JS:

.directive('userAvatar', function() {
    return {
        link: function(scope, element, attrs) {
            var placeholder = 'path/to/your/placeholder.jpg';

            scope.$watch(function() {
                return attrs.ngSrc;
            }, function (value) {
                if (!value) {
                    element.attr('src', placeholder);  
                }
            });

            element.bind('error', function() {
                element.attr('src', placeholder);  
            });
        }
    };
});

HTML:

<div ng-repeat="u in users">
    <div>
      <img ng-src="{{u.imageUrl}}" user-avatar />
    </div>
<div>

So now if the ng-src value is a 404 not found image it will be replaced with the default placeholder

edited Apr 11, 2017 at 10:00

answered Mar 22, 2016 at 8:58

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

1 Comment

Hashir Hussain Over a year ago

Thanks but I know this already. I don't want any alternate image. You can check my question that I'm want my div to be hidden if URL in u.imageUrl is not active or not found.

Collectives™ on Stack Overflow

How to check remote image exists in angularjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related