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?](https://stackoverflow.com/questions/16310298/if-a-ngsrc-path-resolves-to-a-404-is-there-a-way-to-fallback-to-a-default) — Jon Onstott, Jul 05 '17 at 18:41

Artyom Pranovich · Accepted Answer · 2014-12-18T15:31:07.153

51

{{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 '14 at 15:31

answered Dec 18 '14 at 15:23

Artyom Pranovich

6,814
8
41
60

I got this working, but I had to use "src" instead of "ng-src". – wloescher May 15 '17 at 19:49
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! – Leon Mar 15 '21 at 12:36

score 35 · Answer 2 · answered Sep 14 '15 at 12:23

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 '15 at 12:23

João Paulo Cercal

733
1
8
12

I think so, but I'm not sure. – João Paulo Cercal May 25 '16 at 21:02
2

Yes, it works @BiswasKhayargoli-ITH could you tell me more about your experience and your environment with this directive? – João Paulo Cercal Sep 19 '16 at 14:30
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 – Leon Mar 15 '21 at 12:38

score 12 · Answer 3 · answered May 17 '16 at 13:18

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 '16 at 13:18

CreamOfMushroom

131
1
2

This totally works! I wanted to filter the image in controller and this works. – itsHarshad Jun 25 '21 at 11:38
This may not work if [debug data is disabled](https://docs.angularjs.org/guide/production#disabling-debug-data): ```$compileProvider.debugInfoEnabled(false);```. – jla Oct 04 '21 at 09:45

score 1 · Answer 4 · answered Oct 10 '18 at 14:27

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>

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

4 Answers4

Linked