Question

是否有一种简单的方法可以使用Angular为图像提供多个源（多于两个）？

我们正在更改用户个人资料的图像尺寸，但这需要一段时间，在转换过程中，旧图像仍然有效。对于不会移动的旧配置文件也是如此。

目前我们有一个默认＆＃34; notFound.jpg＆＃34;如果图像被意外从服务器中删除，则用作占位符的图像

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

我们希望将其作为选项保留，但在我们确定图片丢失之前，我们可以检查./images/NewProfiles和./images/Profiles。

任何建议

Answer 1

使用此：

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

Answer 2

如果不检查源2，如何创建检查图像是否存在于源1的指令。如果两个位置图像都不存在则显示notFound-image？

下面只是伪代码;我没有测试它..

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

Angular - 检查图像

2 个答案: