Как отобразить изображение по умолчанию, если изображение имеет значение null в angular2

Question

У меня есть источник изображения, но если изображение, полученное из бэкэнда, имеет значение null, тогда я должен отобразить изображение по умолчанию или изображение в бэкэнде. Может ли кто-нибудь помочь мне сделать это. Если часть изображения пуста, я должен отобразить это изображение

"../assets/images/msg.png"

Консоль:

HTML:

<ul>
            <li *ngFor="let message of activeMessages" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
              <span>{{message.updated_at  | date:'dd.MM.yyyy'}}</span>
              <img src="{{message.from_user_image}}" alt="img"/>  
            </li>
          </ul>
<ul>
        <li *ngFor="let reply of message_show.messages">
          <img src="{{reply.from_user_image}}"/>
          <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
          <p>{{reply.text}}</p>
        </li>
      </ul>

Ts:

loadMessages() {
    this.service
          .getMessages()
          .subscribe(
            data => {
              this.messagesdata = data;
              this.activeMessages = data.filter(msg => msg.active == true);
              this.closedMessages = data.filter(msg => msg.active == false);
              if (this.activeMessages.length > 0) {
                if(!this.message_show) {
                  var test = this.message_show = this.activeMessages[0];
                  this.message = true;
                  this.message_id = this.activeMessages[0].id;
                  this.message_show.messages.map(function(msg) {
                    if(msg.from_user_id == test.from_user_id) {
                      msg.from_user_image = test.from_user_image;
                    } else {
                      msg.from_user_image = test.to_user_image;
                    }
                    if(msg.to_user_id == test.to_user_id) {
                      msg.to_user_image = test.to_user_image;
                    } else {
                      msg.to_user_image = test.to_user_image;
                    }
                  })
                }
              }
              if (this.closedMessages.length > 0) {
                if(!this.message_close) {
                  var test2 = this.message_close = this.closedMessages[0];
                  this.message_idc = this.closedMessages[0].id;
                  this.message_close.messages.map(function(msg) {
                    if(msg.from_user_id == test2.from_user_id) {
                      msg.from_user_image = test2.from_user_image;
                    } else {
                      msg.from_user_image = test2.to_user_image;
                    }
                    if(msg.to_user_id == test2.to_user_id) {
                      msg.to_user_image = test2.to_user_image;
                    } else {
                      msg.to_user_image = test2.to_user_image;
                    }
                  })
                }
              }              
            },error => {});
  }

Answer 1

Немного сложно следовать вашему коду, но это, по сути, то, что вы хотите сделать (используйте reply.from_user_image, если оно не равно нулю, затем используйте '../assets/images/msg.png'):

<img [src]="reply.from_user_image || '../assets/images/msg.png'"/>