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

前端之家收集整理的这篇文章主要介绍了使用Angular JS ng-src的后备(默认)图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用从模态返回的数据设置图像源。这是一个ng-repeat循环:
  1. <div id="divNetworkGrid">
  2. <div id="{{network.id}}" ng-repeat="network in networks">
  3. <span>
  4. <table>
  5. <tr>
  6. <td class="imgContainer">
  7. <img ng-src="{{ ('assets/img/networkicons/'+ network.actual + '.png') ||
  8. 'assets/img/networkicons/default.png' }}"/>
  9. </td>
  10. </tr>
  11. </table>
  12. </span>
  13. </div>
  14. </div>

显然,当network.actual model属性返回为null时,我想填充default.png。但是我的代码没有拿起默认的图像,尽管第一个图像在可用的时候很好。

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

有趣的方式使用ng-src。我还没有测试过这个表达方式的处理方式,但是我建议做一个比较稳定的方法
  1. <img ng-src="{{ networkIcon }}" />

在你的控制器中:

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

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

编辑地址中继器:

  1. angular.forEach($scope.networks,function(network) {
  2. network.icon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';
  3. });
  4.  
  5. <tr ng-repeat="network in networks">
  6. <td><img ng-src="{{ network.icon }}" /></td>
  7. </tr>

猜你在找的Angularjs相关文章