Javascript 如果未找到 AngularJS ng-src 条件（通过 url）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27549134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-src condition if Not Found (via url)
提问by Austin
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
这将根据名称获取当前图像路径，如果它不存在，它将简单地返回图像路径 /Content/champions/None.png
I figured this would work the same way via a url. So I made the syntax.
我认为这将通过 url 以相同的方式工作。所以我做了语法。
<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.
我假设会发生的是，如果上面的 URL 返回404 (Not Found)，它将默认返回到我的本地存储中的 None 图像。但是，它仍然会尝试显示在线图像并显示“损坏的图像/图片”图标，而不是调整到我本地的“无”图像。
How might I fix this? Or why is Angular not responding correctly to this scenario when it is saying Not Found 404 (Not Found)?
我该如何解决这个问题？或者为什么 Angular 在说 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
有时它会尝试将条件语法添加到 URL 中，而不是在主目录中重新查找，这可能是问题所在吗？即它有时会返回以下内容而不是从我的内容文件夹重新启动。http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png
回答by Artyom Pranovich
{{Champions1[champ1-1].cName || 'None'}}
This construction would replace your image name with 'None'only when your image is null or undefined.
'None'只有当您的图像为空或未定义时，此构造才会替换您的图像名称。
Angular directive ngSrcdoesn't have any native features for processing of 404 response.
Angular 指令ngSrc没有任何用于处理 404 响应的本机功能。
But it would be fixed with the following onErrorSrcdirective.
但它将通过以下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"/>
See example on JSFiddle
回答by Jo?o Paulo Cercal
Other simple solution is use the following code, that perform the same final result:
其他简单的解决方案是使用以下代码，执行相同的最终结果：
<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>
回答by CreamOfMushroom
I used this:
我用过这个：
<img ng-src="{{ '/api/whatever/' + id + '/image/' }}"
onerror="angular.element(this).scope().imgError()"
onload="angular.element(this).scope().imgLoaded()" />
imgError() and imgLoaded() are functions in the controller for this page. This technique is especially suitable for my purposes, because in it I set a scope variable to hide the image entirely when it's not loaded, and replace it with an internationalized text message about the fact that the image isn't found.
imgError() 和 imgLoaded() 是该页面控制器中的函数。这种技术特别适合我的目的，因为我在其中设置了一个范围变量，以便在未加载图像时完全隐藏图像，并将其替换为关于找不到图像这一事实的国际化文本消息。
回答by GameChanger
Other possiblity to call a function on your Java Script
在 Java Script 上调用函数的其他可能性
<img ng-src="{{yourImageCurrentScopeVar}}" onerror="myFunction(this)"/>
<script>
function myFunction(event) {
event.src = "./Static/app/img/by_default_picture.png";
event.onerror = '';
};
</script>
