javascript - 如果找不到 AngularJS ng-src 条件(通过 url)

Question

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

<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(未找到)，它将默认返回到我的本地存储以存储 None 图像。但是，它仍然会尝试显示在线图像并显示“损坏的图像/图片”图标，而不是对我本地的“无”图像进行调节。

我该如何解决这个问题？或者为什么 Angular 在说 Not Found 404 (Not Found) 时没有正确响应这种情况？

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

Answer 1

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

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

Angular 指令 ngSrc 没有任何处理 404 响应的 native 功能。

但它会被下面的 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 上的示例