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标记上使用src和img，如果ng-src失败（使用的变量不存在等），它会自动回退到src属性。

Answer 2

我想象的是，即使network.actual为空，src也会返回404。例如，第一个值：

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

正在评估404 src网址，例如（＆＃39; assets / img / networkicons / null .png＆＃39;）。所以在OR选择中，它是真实的，但是资源是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"/>

link

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

<svg>

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

Answer 6

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

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

使用Angular JS ng-src的后备（默认）图像

6 个答案: