на изображении профиля используйте троичную операцию с использованием AngularJS

Question

Я делаю проект. На аватарке все исходники взяты с сервера. У меня проблемы с , когда изображение профиля равно нулю, затем отображается изображение пользователя по умолчанию, в противном случае отображается загруженное изображение пользователя.

Я пытаюсь:

<img ng-src="{{rec.ProfilePic=='null' ? '~/img/UserDefault.png' :'{{rec.ProfilePic'}}"
     class="img-thumbnail img-fluid"
     style="border: 1px solid #ddd;margin-bottom:20px"
     alt="profile photo" />

После этого изображение не будет отображаться.

Когда я это делаю, я делаю это, если отображается изображение:

<img ng-src="*path*/canvas_cnv1636941291475872489.jpg" alt=""
     class="btn-md custpro"
     onclick="RenewContract(this)" data-id="5"
     src="*path*/mh-images-local/canvas_cnv1636941291475872489.jpg">`

и когда изображение не отображается, URL:

<img ng-src="*Url*/" alt="" class="btn-md custpro"
     onclick="RenewContract(this)" data-id="6" src="*Url*/">

Answer 1

Либо используйте это

 <img ng-src="{{ imageUrl == null ? defaultImageUrl : imageUrl }}" >

или

 <img ng-src="{{ ! imageUrl ? defaultImageUrl : imageUrl }}" >

, который вы пытаетесь сравнить null == 'null'

Answer 2

Тройной символ можно заменить логическим оператором :

̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶r̶e̶c̶.̶P̶r̶o̶f̶i̶l̶e̶P̶i̶c̶=̶=̶'̶n̶u̶l̶l̶'̶ ̶?̶ ̶'̶~̶/̶i̶m̶g̶/̶U̶s̶e̶r̶D̶e̶f̶a̶u̶l̶t̶.̶p̶n̶g̶'̶ ̶:̶'̶{̶{̶r̶e̶c̶.̶P̶r̶o̶f̶i̶l̶e̶P̶i̶c̶'̶}̶}̶"̶
<img ng-src="{{rec.ProfilePic || '~/img/UserDefault.png'}}"
     class="img-thumbnail img-fluid"
     style="border: 1px solid #ddd;margin-bottom:20px"
     alt="profile photo" />

Операторы && и || фактически возвращают значение одного из указанных операндов, поэтому, если эти операторы используются с небулевыми значениями, они будут возвращать небулево значение.

Для получения дополнительной информации см.

• MDN Справочник по JavaScript - Логические операторы

Answer 3

вы можете использовать ng-if

если изображение профиля не существует: -

<img ng-if="rec.ProfilePic == null" ng-src="{{'~/img/UserDefault.png'}}"
     class="img-thumbnail img-fluid"
     style="border: 1px solid #ddd;margin-bottom:20px"
     alt="profile photo" />

если изображение профиля существует: -

<img ng-if="rec.ProfilePic != null" ng-src="{{ rec.ProfilePic }}"
     class="img-thumbnail img-fluid"
     style="border: 1px solid #ddd;margin-bottom:20px"
     alt="profile photo" />