Обратное (по умолчанию) изображение с использованием Angular JS ng-src

Ответ 1

Интересный способ использования 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>

Ответ 2

Я только что узнал, что вы можете использовать теги ng-src и src в теге img, и если ng-src не работает (переменная не используется и т.д.), она автоматически отбрасывается на src.

Ответ 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"/>

ссылка

Ответ 4

Я предполагаю, что src возвращает 404, даже если network.actual имеет значение null. Например, первое значение:

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

оценивает URL-адрес 404 src, что-то вроде ('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

Ответ 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>

В строке или будет работать, если запрашиваемая переменная undefined. Вышеупомянутая проблема будет устранена.

Ответ 6

Вы можете предоставить альтернативное изображение после оператора OR следующим образом:

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