使用Angular / Ionic / Cordova的某些组合,如果请求图像不存在,如何将图像源动态设置为默认值.注意：我知道这可以使用OnError指令完成,但是这会产生一个我想避免的临时问号图像.也许正在进行Cordova文件通话？
<img ng-src="{{employee.id}}.jpg" df-img-src="default.jpg"/>
更进一步,如何处理未知的文件扩展名.假设员工图片可以以gif,png,jpg或jpeg结尾,我想将image-src设置为文件系统中存在的一个.
解决方法
使用此指令.
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',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"/>
