CODEWITHSUNDEEP
javascriptangularjsimage
Austin
Austin

Reputation: 3080

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

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

Upvotes: 17

Views: 47207

Answers (4)

GameChanger
GameChanger

Reputation: 438

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>

Upvotes: 1

CreamOfMushroom
CreamOfMushroom

Reputation: 131

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.

Upvotes: 12

Jo&#227;o Paulo Cercal
Jo&#227;o Paulo Cercal

Reputation: 773

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'"/>

Upvotes: 35

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

{{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

Upvotes: 52

Related Questions