Monday, June 3, 2024
Homepage · angularjs
 Popular · Latest · Hot · Upcoming
146
rated 0 times [  148] [ 2]  / answers: 1 / hits: 46061  / 10 Years ago, thu, december 18, 2014, 12:00:00

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


More From » angularjs
 Answers
7 
{{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


[#68449] Tuesday, December 16, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
raymondd
Add To Favorites
Follow
Total Points: 620
Total Questions: 112
Total Answers: 94
Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
raymondd questions
Thu, Apr 22, 21, 00:00, 3 Years ago
Sat, Jul 11, 20, 00:00, 4 Years ago
Thu, Jul 9, 20, 00:00, 4 Years ago
Thu, Apr 9, 20, 00:00, 4 Years ago
Thu, Jul 25, 19, 00:00, 5 Years ago
View All
;