0

i have a image source, but if the image coming from backend is null then i must display default image or the image in the backend must display. Can anyone help me to do that. If the image part is null then i must display this image

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

Console: enter image description here

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

1 Answer 1

5

It's a bit difficult to follow your code, but this is essentially what you'll want to do (use the reply.from_user_image unless it's null then use '../assets/images/msg.png'):

<img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
Sign up to request clarification or add additional context in comments.

7 Comments

You could write: reply.from_user_image || '../assets/images/msg.png'. @ritaj: why did you change that?
If there is image in the console will it display that image?, if the image coming from from_user_image is null then the ../assets/images/msg.png must display
@ConnorsFan I edited it back to my original answer. Please upvote if it's the correct one :)
does that satisfy the comment i asked for?
@Bhrungarajni - It will display the default image only if reply.from_user_image is null, undefined or empty.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.