How to display a photo of an authorized user?

Question

Angular

At the moment, the avatar is displayed if it is in the database. But if there is no avatar in the database, then for some reason the default avatar (assets/img/empty_photo.png) is not displayed. How can this be fixed?

<div *ngIf="authTokenService.currentUserData">
    <img class="img" [src]="authTokenService.currentUserData ? authTokenService.currentUserData.user_photo : 'assets/img/empty_photo.png'" name="user_photo">
</div>

Answer 1

<div *ngIf="authTokenService.currentUserData">
Perhaps there (currentUserData) nothing comes at all. Check.
What does the console say? Is the path correct?
Is that how it works?

import { SafeUrl, DomSanitizer } from '@angular/platform-browser'

@Any()
export class Any {
  public defaultAvatarUrl: SafeUrl

  constructor(private readonly sanitizer: DomSanitizer) {
    this.defaultAvatar = this.sanitizer.bypassSecurityTrustUrl(
      'assets/img/empty_photo.png'
    )
  }
}

In general, it's probably better to make a getter:

public get userAvatar(): SafeUrl {
    return this.sanitizer.bypassSecurityTrustUrl(
      this.authTokenService.currentUserData
        ? this.authTokenService.currentUserData.user_photo
        : 'assets/img/empty_photo.png'
    )
  }

Answer 2

If you look closely at the code,
1) At the beginning is This means that the img block will be displayed only if currentUserData is present Now below*ngIf="authTokenService.currentUserData"
This means that if currentUserData exists, the value of authTokenService.currentUserData.user_photo will be displayed even if user_photo is not defined
. And if currentUserData is not present, then the img block will not be displayed, there is no chance that the second part of the ternark will be displayed
Banal error in logic.