Question

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

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

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

我认为这可以通过网址以相同的方式工作。所以我做了语法。

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

我假设会发生的情况是，如果上面的网址返回404 (Not Found)，它会默认返回我的本地存储空间以查找无图像。但是，它仍然会尝试显示在线图像，并显示“图像/图片损坏”。图标而不是调整到我的本地＆＃34;无＆＃34;图像。

我该如何解决这个问题？或者，当Angular说Not Found 404 (Not Found)？

时，为什么Angular没有正确响应这种情况

有时它会尝试将条件语法添加到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响应的任何本机功能。

但它将通过以下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

上的示例

Answer 2

其他简单的解决方案是使用以下代码执行相同的最终结果：

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

Answer 3

我用过这个：

query = query.Take(1);

imgError（）和imgLoaded（）是此页面控制器中的函数。这种技术特别适用于我的目的，因为在其中我设置了一个范围变量来在未加载时完全隐藏图像，并将其替换为关于图像不是的事实的国际化文本消息。找到。

Answer 4

在Java脚本上调用函数的其他可能性

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

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

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

4 个答案: