My profile pic only appears after I touch it on app load

Question

I've created a social media app with Ionic 4, Firebase, Angular and it works fine on Android. But on iOS, when I load the app my profile pic won't appear unless I actually touch it.

Here's the code

  async ngOnInit() {
    firebase.auth().onAuthStateChanged(user => {
      console.log('onAuthStateChanged', user.uid);

      this.currentUser = user;
      this.imageService.getImageDownloadUrl( 'profilePicture', user.uid)
      .then((photo) => {
        console.log('getImageDownloadUrl', photo);

        this.profilePicture = (photo === 'undefined') ? 'false' : photo;
        console.log('profilePicture', this.profilePicture);
      });
    });
  }

  <div class="profilePhoto" [ngSwitch]="profilePicture">
    <div *ngSwitchDefault>
    <img [src]="profilePicture" (click)="Present('profilePicture')">
  </div>
  <div class="logo" *ngSwitchCase="'false'">
    <ion-img style="padding-top: 25px; " src="assets/image/SpaghettiPlus2.png" (click)="openImagePicker('profilePicture')"></ion-img>
  </div>
</div>

I don't have to touch the pic with Android, it just appears on load, but with iOS, it won't load the actual pic, it will just keep the default pic until I actually touch the pic then it magically appears.

Answer 1

try NgZone as i use below code may you get what you want

 constructor(ngZone: NgZone){ }

async ngOnInit() {
  firebase.auth().onAuthStateChanged(user => {
    this.currentUser = user;
    this.imageService.getImageDownloadUrl('profilePicture', user.uid)
      .then((photo) => {
        console.log('getImageDownloadUrl', photo);

        this.ngZone.run(() => {
          this.profilePicture = (photo === 'undefined') ? 'false' : photo;
          console.log('profilePicture', this.profilePicture);
        }
          });
  });
}