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
Best Answer
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.See example on JSFiddle