如果未找到AngularJS ng-src条件（通过url）

一尘不染

如果未找到AngularJS ng-src条件（通过url）

angularjs

我正在将一堆本地存储的图像移植到最新的在线资源中。最初，当我将图像存储在本地时，可以对图像使用以下条件。

<img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png"

这将根据名称获取当前的图像路径，如果不存在，它将简单地返回的图像路径。 /Content/champions/None.png

我想这将通过url以相同的方式工作。所以我做了语法。

<img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
|| 
'/Content/champions/None'}}.png"

我假设会发生的是，如果返回上述URL 404 (Not Found)，它将默认返回到我的本地存储中，以显示无图像。但是，它仍然尝试显示在线图像，并显示“残破的图像/图片”图标，而不是限制在我本地的“无”图像上。

我该如何解决？还是当Angular说Not Found时为什么不对这种情况做出正确的响应404 (Not Found)？

有时，它会尝试将条件语法添加到URL中，而不是在主目录中重新查找，这可能是问题所在吗？即有时它返回以下内容，而不是从我的Content文件夹重新启动。http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

阅读 322

2020-07-04

共1个答案

一尘不染

{{Champions1[champ1-1].cName || 'None'}}

'None'仅当您的图片为null或未定义时，此构造才会将您的图片名称替换为。

Angular指令ngSrc没有用于处理404响应的任何本机功能。

但是，可以使用以下onErrorSrc指令对其进行修复。

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
    return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.onErrorSrc) {
              attrs.$set('src', attrs.onErrorSrc);
            }
          });
        }
    }
});

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/>

参见 JSFiddle 上的
示例

2020-07-04