Angular Ionic Cordova - 默认图像源指令

使用Angular/Ionic/Cordova的某些组合，如果请求图像不存在，我如何动态设置图像源为默认值。注意：我知道这可以通过一个OnError指令完成，但是这会产生一个临时问号图像，我想避免这个问题。也许正在进行Cordova文件调用？Angular Ionic Cordova - 默认图像源指令

<img ng-src="{{employee.id}}.jpg" df-img-src="default.jpg"/>

让事情更进一步，处理未知文件扩展名的问题。假设员工图片可以以gif，png，jpg或jpeg结尾，并且我想要设置文件系统上存在的image-src。

来源

2014-09-25 vicsz

使用此指令。

app.directive('fallbackSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      element.bind('error', function() { 
       angular.element(this).attr("src", attrs.fallbackSrc); 
      }); 
     } 
    } 
});

用法：

<img ng-src="{{employee.id}}.jpg" fall-back-src="default.jpg"/>

否则创建实际源的指令，像下面

app.directive('actualSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      attrs.$observe('actualSrc', function(newVal, oldVal){ 
       if(newVal != undefined){ 
        var img = new Image(); 
        img.src = attrs.actualSrc; 
        angular.element(img).bind('load', function() { 
         element.attr("src", attrs.actualSrc); 
        }); 
       } 
      }); 

     } 
    } 
});

用法：

<img actual-src="{{employee.id}}.jpg" ng-src="default.jpg"/>

Pluker

来源

2014-09-25 15:42:30

这是我尝试过。但是它会导致一个 “？”默认加载之前的图像。我想知道他们是否是避免这种情况的一种方法，即只要求提供正确的图像。 – vicsz 2014-09-25 15:56:47

嘿@vicjugador尝试更新的代码。 – 2014-09-25 17:47:05

更好..但似乎该指令在{{employee.id}}被注入之前被调用（和失败）。因此默认图像仍然显示。如果我硬编码员工编号，事情会正常工作。 – vicsz 2014-09-26 13:45:52

我只是在@Subash Selvaraj's solution中进行了一些改进，以便仔细检查错误并确保将默认图像加载到各种错误中。

(function (Directives) { 
    Directives.directive('fallbackSrc', function() { 
     return { 
      link: function postLink(scope, element, attrs) { 
       element.bind('error', function() { 
        angular.element(this).attr("src", attrs.fallbackSrc); 
       }); 
      } 
     } 
    }); 

    Directives.directive('actualSrc', function() { 
     return { 
      link: function postLink(scope, element, attrs) { 
       attrs.$observe('actualSrc', function (newVal, oldVal) { 
        if (newVal != undefined) { 
         var img = new Image(); 
         img.src = attrs.actualSrc; 
         angular.element(img).bind('load', function() { 
          element.attr("src", attrs.actualSrc); 
         }); 

         angular.element(img).bind('error', function() { 
          element.attr("src", attrs.fallbackSrc); 
         }); 
        } 
       }); 
      } 
     } 
    }); 
})(Directives);

<img fall-back-src="img/PerfilPadrao.png" actual-src="{{UrlPhoto}}">

来源

2017-04-27 18:00:44

Angular Ionic Cordova - 默认图像源指令

回答

相关问题