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

Я пытаюсь установить источник изображения, используя данные, возвращаемые из модала. Это внутри цикла 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>

Как видно, я хочу заполнить default.png когда сети.фактическое свойство model возвращается как null. Но мой код не подбирает изображение по умолчанию, хотя первое изображение появляется нормально, когда доступно.

Я уверен, что это проблема синтаксиса, но не могу понять, что не так.

15
angularjs fallback image src

6 ответов

интересный способ использования ng-src. Я не тестировал, как это выражение будет обрабатываться, но я бы предложил сделать это более стабильным способом:

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

и в вашем контроллере:

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

Edit: чтобы уточнить, я не предлагаю лучший способ сделать это-привязать Источник изображения непосредственно к области, а скорее переместить логику резервного копирования изображения за пределы представления. В моих приложениях я часто делаю это в службах, которые извлекают данные или на самом сервере и отправьте URL-адрес изображения, чтобы клиент мог беспокоиться только об одном свойстве.

Edit to address repeater:

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

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

30

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

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

оценивает URL-адрес 404 src, что-то вроде ('assets/img/networkicons/null.png'). Таким образом, в выборе 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

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

ссылке

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

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

8

вы можете поставить альтернативное изображение после или оператор как это:

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