Question

我正在开发基于Ionic -v1 / Cordova的混合移动应用程序，我想了解最佳实践。

到目前为止，我在控制器函数中找到了一个带fetch函数的选项：

angular.module('my.controllers')
.controller('myCtrl', function ($scope, $q, ws){
    var loadImgLst = ws.getImgList().then(function(response){
        //get image src in a list
        var imgList = response;
        var promisesArray = [];
        for(var i in imgList) {
            var promiseSrc = fetch(imgList[i])
                    .then(function(response) {
                var imgurl = response.url; 
                if(!response.ok)
                {
                    //get fallback img
                    imgurl = "http://mysite/img_default.jpg"; 
                }
                return imgurl;
            }).catch(function(error){
                console.log(error);
            });
            promisesArray.push(promiseSrc);
        }
        return $q.all(promisesArray);
    });
    loadImgLst.then(function(lstImg)
    {
        $scope.lstImg = lstImg;
    });
});

在html视图中：

<ion-content>
    <div class="list">
        <div ng-repeat="src in lstImg">
            <img ng-src="{{ src }}">
        </div>
    </div>
</ion-content>

当我在带有离子服务的浏览器上执行此代码时，我仍然在控制台中出现错误404“未找到”，但显示的是我的默认图像。

我尝试了与XMLHttpRequest（）函数类似的东西并尝试使用/ catch但结果是一样的。

有没有办法避免（或隐藏）此错误？另一种解决这个问题的方法是什么？

谢谢：）

编辑：我也尝试了指令选项：

.directive('fallback', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('error', function() {
                   element.attr('src', attrs.fallback); 
                });
            }
        }
    });

和带有ng-src中不存在的文件的html视图：

<img ng-src="http://mysite/no_img.jpg" fallback="http://mysite/img_default.jpg">

我在控制台中仍然出现此错误404.

Answer 1

您可以在HTML中执行以下操作：

<img fallback-src="http://mysite/img_default.jpg" ng-src="http://mysite/img.jpg""/>

然后在你的JS中：

myApp.directive('fallback', function () {
  var fallback= {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallback);
      });
    }
   }
   return fallback;
});

如何从带有角度的url检查文件是否存在？

1 个答案: