使用Angular JS ng-src的后备(默认)图像

Question

我正在尝试使用从模态返回的数据设置图像源.这是在ng-repeat循环中:

<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模型属性返回null时,我想填充default.png.但是我的代码没有拿起默认图像,尽管第一张图像在可用时会很好.

我确定这是一些语法问题,但无法弄清楚是什么问题.

Answer 1

我刚刚发现,你可以在标签上使用它们ng-src,如果失败(使用的变量不存在等),它将自动回退到属性.srcimgng-srcsrc

Answer 2

我想象的是src即使network.actual为null 也会返回404 .例如,第一个值:

('assets/img/networkicons/'+network.actual+'.png')

正在评估404 src URL,例如('assets/img/networkicons/null .png').所以在OR选择中,它是真实的y,但是资源是404.在这种情况下,你可以通过onError设置回退,例如:

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

CodePen演示用例 - http://codepen.io/jpost-vlocity/pen/zqqerL

Answer 3

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

链接

Answer 4

有趣的使用方式ng-src.我还没有测试过如何处理这个表达式,但我建议这样做一个更稳定的方法:

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

在你的控制器中:

$scope.networkIcon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';

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

编辑以解决转发器:

angular.forEach($scope.networks, function(network) {
  network.icon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';
});

<tr ng-repeat="network in networks">
  <td><img ng-src="{{ network.icon }}" /></td>
</tr>

Answer 5

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

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

Answer 6

您可以在 OR 运算符之后提供替代图像，如下所示：

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