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

I'm working on a hybrid mobile app based on Ionic -v1 / Cordova and I would like to know the best practices for this.

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

So far I found an option with the fetch function in the controller function:

到目前为止，我在控制器函数中找到了一个带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;
    });
});

In the html view :

在html视图中：

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

When I execute this code on the browser with ionic serve, I still have the error 404 "Not found" in the console but my default image is displayed.

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

I tried something similar with the XMLHttpRequest() function and try / catch but the result is the same.

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

Is there a way to avoid (or hide) this error ? An other way to solve this problem ?

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

Thanks :)

谢谢：）

EDIT: I also tried the directive option:

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

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

and the html view with a file that does not exist in ng-src:

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

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

I still have this error 404 in the console.

我在控制台中仍然有这个错误404。

1 个解决方案

#1

in your HTML you can do:

在您的HTML中，您可以：

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

and then in your JS:

然后在你的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;
});

#1