如果角度2中图像为空,如何显示默认图像

Bhr*_*jni 0 typescript angular

我有一个图像源,但如果来自后端的图像为空,那么我必须显示默认图像,或者必须显示后端中的图像。谁能帮我做到这一点。如果图像部分为空,那么我必须显示该图像

"../assets/images/msg.png"
Run Code Online (Sandbox Code Playgroud)

安慰: 在此输入图像描述

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>
Run Code Online (Sandbox Code Playgroud)

时间:

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 => {});
  }
Run Code Online (Sandbox Code Playgroud)

Wil*_*ire 5

遵循您的代码有点困难,但这本质上就是您想要做的(使用reply.from_user_image,除非它为空,然后使用'../assets/images/msg.png'):

<img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
Run Code Online (Sandbox Code Playgroud)