Определить изображение по умолчанию, если переменная {{изображение}} пусто

Question

Моя <img>: папка изображения

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

По умолчанию: assets/img/pic_user.png

Как я могу определить изображение по умолчанию, который не определен в переменной : {{image}}?

Answer 1

Использование логического оператора ИЛИ ||

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

Answer 2

Вы можете сохранить по умолчанию маршрут изображения в переменной, а затем использовать тройной оператор, чтобы использовать его в случае image не существует:

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

, а затем в ваш шаблон:

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

Обратите внимание, что я использовал связывание свойств вместо интерполяции, это гораздо более элегантно, на мой взгляд.

Answer 3

Существует трюк, чтобы установить значения по умолчанию в JavaScript:

var a = newValue || 0; 

То же самое работает и угловые. В вашем случае:

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

Answer 4

Используйте замещающее изображение

<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; 
}); 

от: Angular directive for a fallback image