AngularJS ng-src condition if Not Found (via url)

Question

I am porting a bunch of images that I stored locally to an online resource that stays up to date. Originally when I stored the images locally I could use the following condition for my images.

<img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png"

This would grab the current image pathway based off a name, and if it did not exist it would simply return the image path of /Content/champions/None.png

I figured this would work the same way via a url. So I made the syntax.

<img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
|| 
'/Content/champions/None'}}.png"

What I assumed would occur, is that if the above URL returned 404 (Not Found), it would default back to my local storage for the None image. However, it still tries to display an online image and shows the "broken image/picture" icon rather than conditioning over the to my local "None" image.

How might I fix this? Or why is Angular not responding correctly to this scenario when it is saying Not Found 404 (Not Found)?

Sometimes it tries to add the conditioned syntax to the URL rather than re-looking in the home directory, could that be the problem? i.e. It sometimes returns the following rather than restarting from my Content folder. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

Possible duplicate of if a ngSrc path resolves to a 404, is there a way to fallback to a default? — Jon Onstott
– Jon Onstott, Commented Jul 5, 2017 at 18:41

Artyom Pranovich · Accepted Answer · 2014-12-18 15:31:07Z

52

{{Champions1[champ1-1].cName || 'None'}}

This construction would replace your image name with 'None' only when your image is null or undefined.

Angular directive ngSrc doesn't have any native features for processing of 404 response.

But it would be fixed with the following onErrorSrc directive.

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
    return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.onErrorSrc) {
              attrs.$set('src', attrs.onErrorSrc);
            }
          });
        }
    }
});

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/>

See example on JSFiddle

edited Dec 18, 2014 at 15:31

answered Dec 18, 2014 at 15:23

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

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

2 Comments

wloescher Over a year ago

I got this working, but I had to use "src" instead of "ng-src". <img src="wrongUrl.png" on-error-src="google.com/favicon.ico">

Leon Over a year ago

aaaa that directive works brilliantly! much better than my previous solution onerror="this.src='./img/400blank.png'" , which was not playing nicely with AngularJS. Thanks so much!

João Paulo Cercal · Accepted Answer · 2015-09-14 12:23:34Z

35

Other simple solution is use the following code, that perform the same final result:

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>

answered Sep 14, 2015 at 12:23

João Paulo Cercal

7731 gold badge8 silver badges12 bronze badges

3 Comments

João Paulo Cercal Over a year ago

I think so, but I'm not sure.

João Paulo Cercal Over a year ago

Yes, it works @BiswasKhayargoli-ITH could you tell me more about your experience and your environment with this directive?

Leon Over a year ago

so this answer works but can cause the image to show the error image if AngularJS is too slow to load. The directive solution above is more robust

CreamOfMushroom · Accepted Answer · 2016-05-17 13:18:05Z

12

I used this:

            <img ng-src="{{ '/api/whatever/' + id + '/image/' }}"
                onerror="angular.element(this).scope().imgError()"
                onload="angular.element(this).scope().imgLoaded()" />

imgError() and imgLoaded() are functions in the controller for this page. This technique is especially suitable for my purposes, because in it I set a scope variable to hide the image entirely when it's not loaded, and replace it with an internationalized text message about the fact that the image isn't found.

answered May 17, 2016 at 13:18

CreamOfMushroom

1311 silver badge2 bronze badges

2 Comments

itsHarshad Over a year ago

This totally works! I wanted to filter the image in controller and this works.

jla Over a year ago

This may not work if debug data is disabled: $compileProvider.debugInfoEnabled(false);.

GameChanger · Accepted Answer · 2018-10-10 14:27:27Z

1

Other possiblity to call a function on your Java Script

<img ng-src="{{yourImageCurrentScopeVar}}" onerror="myFunction(this)"/>

<script>
function myFunction(event) {
event.src = "./Static/app/img/by_default_picture.png";
event.onerror = '';
};
</script>

answered Oct 10, 2018 at 14:27

GameChanger

4481 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-src condition if Not Found (via url)

4 Answers 4

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related