web-dev-qa-db-fra.com

Image de secours (par défaut) utilisant Angular JS ng-src

J'essaie de définir une source d'image à l'aide de données renvoyées par un modal. C'est à l'intérieur d'une boucle 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>

Comme cela est évident, je veux remplir default.png lorsque la propriété du modèle network.actual est retournée comme nulle. Mais mon code ne récupère pas l'image par défaut, bien que la première image soit correcte lorsqu'elle est disponible.

Je suis sûr que c'est un problème de syntaxe, mais je ne peux pas comprendre ce qui ne va pas.

imageangularjssrcfallback
14
nikjohn

Façon intéressante d'utiliser ng-src. Je n'ai pas testé comment cette expression serait gérée mais je suggérerais de le faire de manière plus stable:

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

Et dans votre contrôleur:

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

Edit: Juste pour clarifier, je ne suggère pas la meilleure façon de le faire est de lier la source d'image directement à la portée, mais plutôt de déplacer la logique de secours d'image en dehors de la vue. Dans mes applications, je le fais souvent dans les services qui récupèrent les données ou sur le serveur lui-même et envoie une URL d'image pour que le client n'ait à se soucier que d'une seule propriété.

Modifier pour répéter l'adresse:

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
Terry

Je viens de découvrir que vous pouvez utiliser les deux ng-src et src sur une balise img et si ng-src échoue (la variable utilisée n'existe pas, etc.), elle reviendra automatiquement à l'attribut src.

31
kudlajz

J'imagine que le src retourne un 404 même si network.actual est nul. Par exemple, première valeur:

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

est en train d'évaluer une URL 404 src, quelque chose comme ('assets/img/networkicons/ null . png'). Donc, dans la sélection OR, c'est vérité-y, mais la ressource est 404. Dans ce cas, vous pouvez définir le repli via onError avec quelque chose comme:

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" />

CodePen pour les cas d'utilisation de démonstration - http://codepen.io/jpost-vlocity/pen/zqqerL

19
jpostdesign
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"/>

lien

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

Le inline ou fonctionnera si la variable interrogée n'est pas définie. Ce qui précède résoudra votre problème

8
Kochoba

Vous pouvez fournir l'image alternative après l'opérateur OR comme ceci:

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