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

angularjs image src bind
ng-src angular 7
display image in angularjs
angularjs display image from server
angular 6 default image if not found
angular check if image src exists
iframe ng-src not working
angularjs image not displaying

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

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

javascript - AngularJS ng-src condition if Not Found (via url), {{Champions1[champ1-1].cName || 'None'}}. This construction would replace your image name with 'None' only when your image is null or undefined. Angular  The ng-src directive should be used instead of src if you have AngularJS code inside the src value. The ng-src directive makes sure the image is not displayed wrong before AngularJS has evaluated the code.

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

AngularJS: API: ngSrc, AngularJS is what HTML would have been, had it been designed for building web-apps. Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS <img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="​Description" />  Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address.

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.

Angular ng-src onerror such as image resolves to a broken src , If we work on PHP or any framework then we check condition or something AngularJS directive through we can simple check image is exists or not on url image is exists or not, if not then it will set err-src image as default. Angular ng-if not true. Browse other questions tagged angularjs angular-ng-if or ask your own question. copy and paste this URL into your RSS reader.

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, Add an image, where the src is evaluated by AngularJS: The ng-src directive makes sure the image is not displayed wrong before AngularJS has evaluated  Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

Angular ng-src Directive, AngularJs solve broken image on failing to load image from dynamic This article will help you to deal with broken images in AngularJs apps when you load images from dynamic URL. below which can be found in the following thread in StackOverflow <img src="image.png" onError="this.onerror=null  I am using the ng-src directive in order to avoid the browser to request the image before Angular evaluate the expression. ng-src={{image}} will update the src attribute of the image if the expression "image" change. I misunderstand why the ng-src directive doesn't update the path of the image if the expression ("myImage.png") become empty ("").

AngularJs solve broken images when loading image from dynamic , The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element. It ensures that the wrong image is not produced until AngularJS has been evaluated. It is supported by <img> element. Syntax: <img ng-src="url"> </​img> Please Improve this article if you find anything incorrect by clicking on the​  My response is a few years late, but this is for anyone who is still looking for a solution. I had the same issue. I remembered that Youtube displays their embedded videos using a different tag - iframe.

AngularJS, The Angular ngSrc directive serves to properly set an image src via Angular. However, when the ng-src attribute is empty, Angular will not empty the src attribute. makandra has been working exclusively with Ruby on Rails since 2007. AngularJS 1: How to keep "ng-hidden" elements from flickering on page load. Use ng-Src, instead of src attribute in the images, with the use of this Angular directive, request will issue only after Angular has evaluated the binding expression. Use the code, given below, for ng-Src :

Comments
  • Take a look at stackoverflow.com/a/17122325/356380
  • Possible duplicate of if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  • 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">
  • I think so, but I'm not sure.
  • Yes, it works @BiswasKhayargoli-ITH could you tell me more about your experience and your environment with this directive?