Fallback (default) image using Angular JS ng-src

Question

I'm trying to set an image source using data returned from a modal. This is inside an ng-repeat loop:

<div id="divNetworkGrid">
    <div id="{{network.id}}" ng-repeat="network in networks">
        <span>
            <table>
                <tr>
                    <td class="imgContainer">
                        <img ng-src="{{ ('assets/img/networkicons/'+ network.actual + '.png') || 
                                         'assets/img/networkicons/default.png' }}"/>
                    </td>
                </tr>
            </table>
        </span>
    </div>
</div>

As is apparent, I want to populate default.png when the network.actual model property is returned as null. But my code is not picking up the default image, though the first image is coming up fine when available.

I'm sure this is some syntax issue, but cant figure out what's wrong.

I have often wondered how to do this and have tried such things as you have, but it had never seemed to work! Good question! — SM3RKY
– SM3RKY, Commented Sep 17, 2015 at 2:27

kudlajz · Accepted Answer · 2015-09-22 13:57:49Z

31

I have just found out, that you can use both ng-src and src on an img tag and if ng-src fails (variable used does not exists etc.), it will automatically fallback to src attribute.

answered Sep 22, 2015 at 13:57

kudlajz

1,0668 silver badges15 bronze badges

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

1 Comment

Parijat Over a year ago

I thinks solution is better if you do not want to write more code.

jpostdesign · Accepted Answer · 2016-03-10 16:56:55Z

19

What I imagine is happening is the src is returning a 404 even if network.actual is null. For example, first value:

('assets/img/networkicons/'+network.actual+'.png')

is evaluating to a 404 src URL, something like ('assets/img/networkicons/null.png'). So in the OR selection, it's truth-y, but the resource is 404. In that case, you can set the fallback via onError with something like:

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" />

CodePen to demo use cases - http://codepen.io/jpost-vlocity/pen/zqqerL

answered Mar 10, 2016 at 16:56

jpostdesign

2,6362 gold badges17 silver badges15 bronze badges

3 Comments

Fergus Over a year ago

This is perfect if the +network.actual+ var exists but the image does not!

Sergey Mell Over a year ago

The best solution as to me

Aine Evans Over a year ago

Clean, simple and neat. Works well.

Bartando · Accepted Answer · 2017-10-19 14:17:22Z

15

angular.module('fallback',[]).directive('fallbackSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            element.bind('error', function () {
                angular.element(this).attr("src", attrs.fallbackSrc);
            });
        }
    }
});

<img ng-src="{{url}}" fallback-src="default-image.jpg"/>

angular.module('fallback', []).directive('actualSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            attrs.$observe('actualSrc', function(newVal, oldVal){
                 if(newVal != undefined){
                     var img = new Image();
                     img.src = attrs.actualSrc;
                     angular.element(img).bind('load', function () {
                         element.attr("src", attrs.actualSrc);
                     });
                 }
            });

        }
    }
});

<img actual-src="{{url}}" ng-src="default.jpg"/>

link

edited Oct 19, 2017 at 14:17

Bartando

7488 silver badges26 bronze badges

answered Oct 6, 2014 at 1:34

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

3 Comments

newman Over a year ago

I was reluctant to try this initially because I thought it must be a simpler solution. However, after I tried many suggestions and none of them work perfectly, this is definitely the best one. Thanks!

Subash Selvaraj Over a year ago

@miliu Glad it helped you :)

wal5hy Over a year ago

minor error: first example should use fallback-src as the attribute html code (or fallBackSrc as the directive name). Great solution otherwise!

Ed B · Accepted Answer · 2015-01-11 18:01:04Z

10

Interesting way to use ng-src. I haven't tested how that expression would be handled but I would suggest doing it a more stable way:

<img ng-src="{{ networkIcon }}" />

And in your controller:

$scope.networkIcon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';

Edit: Just to clarify, I'm not suggesting the best way to do this is to bind the image source directly to the scope but rather to move the image fallback logic outside of the view. In my applications I often do it in the services that retrieve the data or on the server itself and send an image URL so the client only has to worry about a single property.

Edit to address repeater:

angular.forEach($scope.networks, function(network) {
  network.icon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';
});

<tr ng-repeat="network in networks">
  <td><img ng-src="{{ network.icon }}" /></td>
</tr>

edited Jan 11, 2015 at 18:01

Ed B

8591 gold badge7 silver badges25 bronze badges

answered Jul 7, 2014 at 15:54

Terry

14.2k9 gold badges58 silver badges84 bronze badges

3 Comments

nikjohn Over a year ago

I should have specified before, but network.actual is actually within an ng-repeat. network is an iteration of the networks model. So this option wouldn't work for me, unfortunately...

Terry Over a year ago

Yes it will, in my edit paragraph I mentioned I do it in services that retrieve the data. So before you bind to the repeater iterate through your data and replace (or append) the image source.

Terry Over a year ago

I've updated my answer with an example of how to modify the data before it hits the repeater.

Kochoba · Accepted Answer · 2015-05-28 18:02:19Z

8

<div id="divNetworkGrid">
                <div id="{{network.id}}" ng-repeat="network in networks">
                    <span>
                        <table>
                            <tr>
                                <td class="imgContainer">
                                    <img ng-src="{{'assets/img/networkicons/'+(network.actual || 'default' )+'.png'}}"/>
                                </td>
                            </tr>
                        </table>
                    </span>
                </div>
            </div>

The inline or will work if the the queried variable is undefined. The above will fix your issue

answered May 28, 2015 at 18:02

Kochoba

3913 silver badges7 bronze badges

Comments

Nikolay Mihaylov · Accepted Answer · 2016-08-07 14:15:02Z

5

You can supply the alternative image after OR operator like this:

{{ book.images.url || 'Images/default.gif' }}

edited Aug 7, 2016 at 14:15

Nikolay Mihaylov

3,9028 gold badges29 silver badges33 bronze badges

answered Aug 7, 2016 at 12:45

Rajnesh Nadan

911 silver badge1 bronze badge

Collectives™ on Stack Overflow

Fallback (default) image using Angular JS ng-src

6 Answers 6

1 Comment

3 Comments

3 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related