Image 使用角度JS ng src的回退（默认）映像

我正在尝试使用从模式返回的数据设置图像源。这在ng重复循环内：

<div id="divNetworkGrid">
    <div id="{{network.id}}" ng-repeat="network in networks">
        <span>
            <table>
                <tr>
                    <td class="imgContainer">
                        <img ng-src="{{ ('assets/img/networkicons/'+ network.actual + '.png') || 
                                         'assets/img/networkicons/default.png' }}"/>
                    </td>
                </tr>
            </table>
        </span>
    </div>
</div>

显而易见，当network.actual model属性返回为null时，我希望填充default.png。但是我的代码没有选择默认图像，尽管第一个图像在可用时可以正常显示

---

我确信这是一些语法问题，但无法找出错误所在。

使用

ngsrc

的有趣方式。我还没有测试如何处理该表达式，但我建议使用更稳定的方法：

<img ng-src="{{ networkIcon }}" />

编辑：只是澄清一下，我不是建议最好的方法是将图像源直接绑定到范围，而是将图像回退逻辑移到视图之外。在我的应用程序中，我经常在检索数据的服务中或在服务器本身上执行此操作，并发送图像URL，因此客户端只需担心单个属性

编辑到地址中继器：

angular.forEach（$scope.networks，function（network）{
network.icon=network.actual？'assets/img/networkicons/'+network.actual+'.png'：'assets/img/networkicons/default.png'；
});

angular.module（'fallback'，[]）指令（'fallbackSrc'，函数（）{
返回{
链接：函数postLink（范围、元素、属性）{
元素绑定（'error'，函数（）{
angular.element（this.attr）（“src”，attrs.fallbackSrc）；
});
}
}
});
角度.module（'fallback'，[]）.directive（'actualSrc'，function（）{
返回{
链接：函数postLink（范围、元素、属性）{
属性$observe（'actualSrc'，函数（newVal，oldVal）{
if（newVal！=未定义）{
var img=新图像（）；
img.src=attrs.actualSrc；
angular.element（img）.bind（'load'，function（）{
元素属性（“src”，attrs.actualSrc）；
});
}
});
}
}
});

---

如果查询的变量未定义，则内联或将起作用。以上内容将解决您的问题

我刚刚发现，您可以在

img

标记上同时使用

ng src

和

src

，如果

ng src

失败（使用的变量不存在等），它将自动回退到

src

属性。

我想象的是，即使

网络，src也会返回404。实际的
为空。例如，第一个值：

（'assets/img/networkicons/'+network.actual+'.png'）

正在评估404 src URL，类似于（'assets/img/networkicons/null.png'）。所以在OR选择中，它是truth-y，但资源是404。在这种情况下，您可以通过OneError设置回退，如下所示：

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" />



CodePen演示用例-
您可以在或操作员之后提供替代图像，如下所示：

{{ book.images.url || 'Images/default.gif' }}

我以前应该指定，但是network.actual实际上在ng repeat中。网络是网络模型的迭代。所以这个选项对我不起作用，不幸的是……是的，它会起作用，在我提到的编辑段落中，我在检索数据的服务中这样做。因此，在绑定到转发器之前，请遍历您的数据并替换（或附加）图像源。我已经用一个示例更新了我的答案，说明了如何在数据到达转发器之前修改数据。我经常想知道如何做到这一点，并尝试过像您这样的事情，但它似乎从未起作用！好问题！我认为如果你不想写更多的代码，这个解决方案会更好。如果+network.actual+var存在，但映像不存在，这是完美的！最好的解决方案是简单整洁。很好，谢谢。。优雅而简单的解决方案。一开始我不愿意尝试，因为我认为这一定是一个更简单的解决方案。然而，在我尝试了很多建议后，没有一个是完美的，这绝对是最好的。谢谢@miliu很高兴它帮助了您：）小错误：第一个示例应该使用fallback src作为属性html代码（或者fallBackSrc作为指令名）。否则，这是一个很好的解决方案！
angular.module('fallback',[]).directive('fallbackSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            element.bind('error', function () {
                angular.element(this).attr("src", attrs.fallbackSrc);
            });
        }
    }
});

<img ng-src="{{url}}" fallback-src="default-image.jpg"/>

angular.module('fallback', []).directive('actualSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            attrs.$observe('actualSrc', function(newVal, oldVal){
                 if(newVal != undefined){
                     var img = new Image();
                     img.src = attrs.actualSrc;
                     angular.element(img).bind('load', function () {
                         element.attr("src", attrs.actualSrc);
                     });
                 }
            });

        }
    }
});

<img actual-src="{{url}}" ng-src="default.jpg"/>

<div id="divNetworkGrid">
                <div id="{{network.id}}" ng-repeat="network in networks">
                    <span>
                        <table>
                            <tr>
                                <td class="imgContainer">
                                    <img ng-src="{{'assets/img/networkicons/'+(network.actual || 'default' )+'.png'}}"/>
                                </td>
                            </tr>
                        </table>
                    </span>
                </div>
            </div>

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" />

{{ book.images.url || 'Images/default.gif' }}