AngularJS NG-SRC条件，如果没有找到（通过URL） [英] AngularJS ng-src condition if Not Found (via url)

问题描述

我移植，我在本地存储到保持最新的在线资源一堆图像。最初的时候我存储图像在本地，我可以使用下面的条件我的图片。

 ＆LT; IMG NG-SRC =/内容/冠军/ {{Champions1 [cham​​p1-1] .cName.trim（）||'无'}} PNG
 

这会抓住基于掀起了名称当前图像途径，如果不存在，它会简单地返回 /Content/champions/None.png 的图像路径

我想这将通过一个URL的工作方式相同。所以我做的语法。

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

我以为会发生什么，是，如果上面的网址返回 404（未找到），它会默认回到我的无图像本地存储。但是，它仍然尝试显示在线图像，并显示破碎的形象/图片图标，而不是空调在我的本地无的形象。

我会如何解决这个问题？或者为什么不折角正确应对这种情况的时候是说没有找到 404（未找到）？

有时它会尝试将空调的语法添加到URL，而不是重新寻找主目录，会是什么问题？即有时返回以下，而不是从我的文件夹中的内容重新启动。 <$c$c>http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

解决方案

  {{Champions1 [cham​​p1-1] .cName || '没有'}}
 

此建设将其替换图片名称无只有当你的图像为null或未定义。

角指令 ngSrc 不具备处理任何本机的功能404响应。

不过，这将是固定以下 onErrorSrc 指令。

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（'onErrorSrc'，函数（）{
    返回{
        链接：功能（范围，元素，ATTRS）{
          element.bind（'错误'，函数（）{
            如果（attrs.src！= attrs.onErrorSrc）{
              ATTRS $集（'src'中，attrs.onErrorSrc）。
            }
          }）;
        }
    }
}）;＆LT; IMG NG-SRC =wrongUrl.png的错误-SRC =htt​​p://google.com/favicon.ico/＆GT;
 

查看 的jsfiddle

I am porting a bunch of images that I stored locally to an online resource that stays up to date. Originally when I stored the images locally I could use the following condition for my images.

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

This would grab the current image pathway based off a name, and if it did not exist it would simply return the image path of /Content/champions/None.png

I figured this would work the same way via a url. So I made the syntax.

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

What I assumed would occur, is that if the above URL returned 404 (Not Found), it would default back to my local storage for the None image. However, it still tries to display an online image and shows the "broken image/picture" icon rather than conditioning over the to my local "None" image.

How might I fix this? Or why is Angular not responding correctly to this scenario when it is saying Not Found 404 (Not Found)?

Sometimes it tries to add the conditioned syntax to the URL rather than re-looking in the home directory, could that be the problem? i.e. It sometimes returns the following rather than restarting from my Content folder. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

解决方案

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

This construction would replace your image name with 'None' only when your image is null or undefined.

Angular directive ngSrc doesn't have any native features for processing of 404 response.

But it would be fixed with the following onErrorSrc directive.

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"/>

See example on JSFiddle

这篇关于AngularJS NG-SRC条件，如果没有找到（通过URL）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！