CODEWITHSUNDEEP
angularjshtml
Dan Kelly
Dan Kelly

Reputation: 2702

Angular - check multiple src routes for image

Is there a simple way to have multiple source (more than two) for an image using Angular?

We are changing our image sizes for our user profiles, but this will take a while, and during the transition the old images will still be valid. This will also be the case for old profiles which will not be moved.

At the moment we have a default "notFound.jpg" image that is used as a placeholder if the image is accidentally deleted from the server

<img src="./images/Profile/{{Photo}}" ng-error-src="./images/notFound.jpg">

We'd like to keep this as an option, but be able to check ./images/NewProfiles and ./images/Profiles before we decide the image has gone missing.

Any suggestions

Upvotes: 1

Views: 1090

Answers (2)

Anvesh P
Anvesh P

Reputation: 299

Use this:

<img ng-src="{{ './images/Profile/'{{Photo}} || './images/notFound.jpg'}}">

Upvotes: 1

fen89
fen89

Reputation: 579

How about creating a directive which checks if image is present at source 1, if not checking source 2. If in both location image is not present show notFound-image?

Below is just pseudo-code; I didn't test it..

<img img-directive-src="./images/Profile/{{Photo}}" 
 img-directive-fallback="./images/Profiles/{{Photo}" 
 img-directive-error="./images/notFound.jpg" />

And in the directive something like this (quick and dirty):

.directive('imgDirective', function() {
    return {
       scope: {
           src: '=',
           fallback: '=',
           error: '='
       },
       link: function(scope, element, attrs) {
          var request = new XMLHttpRequest();
          request.open('HEAD', scope.src, false);
          request.send();
          if(request.status == 200) {
              element.attr('src', scope.src);
          } else {
              request = new XMLHttpRequest();
              request.open('HEAD', scope.fallback, false);
              if(request.status == 200) {
                  element.attr('src', scope.fallback);
              } else {
                  element.attr('src', scope.error);
              }
          }
       }
    };
});

Upvotes: 1

Related Questions