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

发布时间：2020-12-17 08:05:53 所属栏目：安全来源：网络整理

导读：我正在尝试使用从模态返回的数据设置图像源。这是一个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.act

我正在尝试使用从模态返回的数据设置图像源。这是一个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 model属性返回为null时，我想填充default.png。但是我的代码没有拿起默认的图像，尽管第一个图像在可用的时候很好。

我确定这是一些语法问题，但不能弄清楚是什么问题。

有趣的方式使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!