Angular Ionic Cordova - 默认图像源指令

Question

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

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

更进一步,如何处理未知的文件扩展名.假设员工图片可以以gif,png,jpg或jpeg结尾,我想将image-src设置为文件系统中存在的一个.

Answer 1

使用此指令.

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