javascript - 如何检查文件是否存在于带 Angular url中？

Question

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

到目前为止，我在 Controller 函数中找到了一个带有 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 View 中:

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

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

我用 XMLHttpRequest() 函数尝试了类似的东西并尝试/捕获，但结果是一样的。

有没有办法避免(或隐藏)这个错误？解决此问题的另一种方法？

谢谢:)

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

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

以及带有在 ng-src 中不存在的文件的 html View :

<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;
});