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

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"

我假设会发生的情况是,如果上面的URL返回404 (Not Found),它将默认返回我的本地存储为None图像.但是,它仍会尝试显示在线图像并显示"图像/图片损坏"图标,而不是调整到我当地的"无"图像.

我该如何解决这个问题？或者为什么当Angular说Not Found时,Angular没有正确响应这个场景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'}}

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

Answer 2

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

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

Answer 3

我用过这个:

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

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