I am trying to figure out how to display a default image when the image source coming from the backend is null. Can someone assist me with this issue? If the image part is null, then I want to display the following image:
"../assets/images/msg.png"
Console: https://i.sstatic.net/C1AQb.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 => {}
);
}