Угловая - проверьте несколько маршрутов src для изображения

Question

Есть ли простой способ иметь несколько источников (более двух) для изображения с использованием углового?

Мы меняем размеры наших изображений для наших профилей пользователей, но это займет некоторое время, и в ходе перехода старые изображения будут по-прежнему действительны. Это также будет иметь место для старых профилей, которые не будут перемещены.

В настоящее время у нас есть «notFound.jpg» изображение по умолчанию, который используется в качестве заполнителя, если изображение случайно удалены с сервера

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

Мы хотели бы, чтобы это как вариант, но сможете проверить ./images/NewProfiles и ./images/Profiles, прежде чем мы решим, что изображение пропало.

Любые предложения

Answer 1

Как о создании директивы, которая проверяет, является ли изображение присутствует в источнике 1, если не проверять источник 2. Если в обоих местоположения изображения нет шоу NotFound-изображение?

Ниже приведен только псевдокод; Я не проверял ..

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

А директива что-то вроде этого (быстрая и грязная):

.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); 
       } 
      } 
     } 
    }; 
}); 

Answer 2

Используйте это:

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