Angular Ionic Cordova - 默认图像源指令答案

【问题标题】：Angular Ionic Cordova - Default Image Source DirectiveAngular Ionic Cordova - 默认图像源指令
【发布时间】：2014-11-20 09:31:35
【问题描述】：

如果请求图像不存在，如何使用 Angular / Ionic / Cordova 的某种组合将图像源动态设置为默认值。注意：我知道这可以通过 OnError 指令来完成，但是这会导致我想避免的临时问号图像。或许进行 Cordova File 调用？

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

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

【问题讨论】：

标签： angularjs cordova ionic-framework

【解决方案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

【讨论】：

这是我尝试过的......但是它会导致“？”默认加载之前的图像。我想知道他们是否可以避免这种情况，即只请求正确的图像。
更好 .. 但似乎该指令在 {{employee.id}} 被注入之前被调用（并且失败）。因此，仍会显示默认图像。如果我硬编码员工编号，一切都会正常工作。
漂亮！像魅力一样工作，非常光滑。

【解决方案2】：

我只是对@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}}">

【讨论】：