如果未找到 AngularJS ng-src 条件(通过 url) [英] AngularJS ng-src condition if Not Found (via url)

问题描述

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

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"

这将根据名称获取当前图像路径，如果它不存在，它将简单地返回 /Content/champions/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

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

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"

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

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.

我该如何解决这个问题?或者为什么 Angular 在说 Not Found 404 (Not Found) 时没有正确响应这种情况?

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

有时它会尝试将条件语法添加到 URL 而不是在主目录中重新查找，这可能是问题所在吗?即它有时会返回以下内容，而不是从我的内容文件夹重新启动.http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

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'}}

只有当您的图像为空或未定义时，此结构才会将您的图像名称替换为 'None'.

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

Angular 指令 ngSrc 没有任何用于处理 404 响应的本机功能.

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

但它会通过以下 onErrorSrc 指令修复.

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

参见 JSFiddle

这篇关于如果未找到 AngularJS ng-src 条件(通过 url)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！