如何使用角度检查来自url的文件是不是存在？

Posted 2023-03-07

【中文标题】如何使用角度检查来自url的文件是不是存在？

【英文标题】：How to check if file exists from url with angular?如何使用角度检查来自url的文件是否存在？

【发布时间】：2018-03-28 20:40:16

【问题描述】：

我正在开发基于 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>

当我使用 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 视图：

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

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

【问题讨论】：

欢迎使用 ***，为该控制器发布更多代码可能会有所帮助，因为很难准确了解您在做什么并因此解决您的问题！尽管您不想完全发布所有内容，但通常最好显示足够的代码/html，以便人们可以自己运行它。

您要检查的“文件”总是图像文件吗？您可以在 html 中以 ng-src="http://mysite/img01.jpg ? http://mysite/img01.jpg : http://mysite/img_default.jpg"

的形式执行此操作

是的，在这种情况下，它只会是图像文件，如果我可以为其他类型的文件获得一些东西，它也可以是好的（但今天就足够了；））不幸的是我不能让你的代码为我工作，我得到“mysite/img01.jpg”在这种情况下有 src。

【参考方案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;
);

【讨论】：

谢谢回答，我对角度和所有可能性都不是很熟悉。指令的想法似乎是一件好事，我无法让这段代码“按原样”工作。我会在good reading 和一些测试后回来:)

你应该把 myApp 改成 angular.module('yourModulName')

我用这个建议编辑了我的帖子。我得到相同的结果。是否可以在此级别避免此错误？