Definieren Sie ein Standardbild, wenn die Variable {{image}} leer ist

Question

Mein <img>:

<img width="90" height="90" src="{{image}}" /> 

Standardbildordner: assets/img/pic_user.png

Wie kann ich ein Standard-Bild definieren, die nicht in der Variable definiert ist : {{image}}?

Answer 1

Verwenden logische OR-Operator ||

<img width="90" height="90" src="{{image||'assets/img/pic_user.png'}}" /> 

Answer 2

Sie Standard-Bild Route in Variablen speichern und dann ternären Operator verwenden, um es zu verwenden, falls image existieren nicht:

defaultImage: string = "assets/img/pic_user.png"; 

Und dann in Ihre Vorlage:

<img width="90" height="90" [src]="image ? image : defaultImage" /> 

Beachten Sie, dass ich verwendet habe Property Bindung statt Interpolation, es ist meiner Meinung nach viel eleganter.

Answer 3

Es gibt einen Trick Standardwerte in JavaScript zu setzen:

var a = newValue || 0; 

Gleiche funktioniert auch für Angular. In Ihrem Fall:

<img width="90" height="90" src="{{image || 'assets/img/pic_user.png' }}" /> 

Answer 4

ein Ersatz-Image verwenden

<img fallback-src="fallbackimg" ng-src="{{image}}"/> 

myApp.directive('fallbackSrc', function() { 
    var fallbackSrc = { 
    link: function postLink(scope, iElement, iAttrs) { 
     iElement.bind('error', function() { 
     angular.element(this).attr("src", iAttrs.fallbackSrc); 
     }); 
    } 
    } 
    return fallbackSrc; 
}); 

aus: Angular directive for a fallback image