angularjs – Angular Ionic Cordova – 默认图像源指令

发布时间：2020-12-17 17:20:33 所属栏目：安全来源：网络整理

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

使用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"/>

Pluker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!