AngularJS ng-src 条件 if Not Found (通过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”图像。然而，它仍然试图显示在线图片并显示“损坏的图像/图片”图标，而不是换成我本地的“None”图像。

我该如何解决？或者为什么Angular在说“未找到404（未找到）”时没有正确响应这种情况？

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

- Austin

---

请查看https://dev59.com/xWQo5IYBdhLWcg3wG8SE#17122325。 - Whisher

可能是重复的问题：如果ngSrc路径解析为404，是否有一种方法可以回退到默认值？ - Jon Onstott

Answer 1

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

当你的图像为null或undefined时，这个构造将用'None'代替你的图像名称。

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上的示例。

- Artyom Pranovich

---

我已经让它工作了，但是我不得不使用“src”而不是“ng-src”。 <img src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/> - wloescher

这个指令非常出色！比我之前的解决方案 onerror="this.src='./img/400blank.png'" 好多了，那个在 AngularJS 中表现不佳。非常感谢！ - Leon

Answer 2

另一个简单的解决方案是使用以下代码，它可以实现相同的最终结果：

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>

- João Paulo Cercal

---

我认为是这样，但我不确定。 - João Paulo Cercal

是的，它有效。@BiswasKhayargoli-ITH，您能告诉我更多关于这个指令的使用经验和环境吗？ - João Paulo Cercal

所以这个答案是可行的，但如果AngularJS加载太慢，可能会导致图像显示错误图像。上面的指令解决方案更加健壮。 - Leon

Answer 3

我用了这个：

            <img ng-src="{{ '/api/whatever/' + id + '/image/' }}"
                onerror="angular.element(this).scope().imgError()"
                onload="angular.element(this).scope().imgLoaded()" />

imgError()和imgLoaded()是此页面控制器中的函数。该技术特别适合我的目的，因为我在其中设置一个作用域变量，以便在图片未加载时完全隐藏该图片，并用国际化文本消息替换它，说明找不到该图片。

- CreamOfMushroom

---

这个完全有效！我想在控制器中过滤图像，这个可以用。 - itsHarshad

如果禁用调试数据，则此方法可能无效：$compileProvider.debugInfoEnabled(false);。 - jla

Answer 4

在JavaScript中调用函数的另一种可能性

<img ng-src="{{yourImageCurrentScopeVar}}" onerror="myFunction(this)"/>

<script>
function myFunction(event) {
event.src = "./Static/app/img/by_default_picture.png";
event.onerror = '';
};
</script>

- GameChanger