How to reload the image src after uploading the image file into AWS S3?

Ionic Framework Ionic Angular
1

On the user profile page, my module gets an image from the gallery, uploads it to AWS S3, and then updates the existing image. However, even though the image has already been uploaded to AWS S3, the user profile image is not reloaded on the screen. One strange thing is that when I trigger some other event(e.g, a segment or other button is clicked), the uploaded image is loaded.
How should I trigger an event to reload an updated image?

I’ve already tried trigger events using Injectable and Subject, but it didn’t solve this problem.
Also, ChangeDetectorRef didn’t solve this issue.

  • Ionic 5 Cordova / Angular

// typescript code:

import { UUID } from 'angular2-uuid';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';  

userImage: any;  

constructor(private platform: Platform,   
    private changeRef: ChangeDetectorRef, 
    private camera: Camera, 
    private util: UtilService, 
    private events: EventsService, 
    private rcvEvents: EventsService ) { 
} 

openGallery() {  
    const options: CameraOptions = {
      quality: 100, 
      targetWidth: 480, 
      targetHeight: 640, 
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    }; 
    const uuid = UUID.UUID().toString();  
    const uuid_file = uuid.replace(/-/g, "") + ".jpg"; 

     this.camera.getPicture(options).then((uri) => { 
      this.util.makeFileIntoBlob(uri, uuid_file).then((imageData:any) => {
        this.util.uploadAwsFile(imageData, 'user', uuid_file).then(res => { 
            const result = res['data'];  
            this.userImage = result['Location']; 
            }); 
        });  
    }).catch(err =>{ 
      this.util.presentToast(`${err}`, false, 'bottom', 1500); 
    });
  } 
 
// HTML 
<img [src]="userImage" class='round-image' (click)="openGallery()">
2

Try using NgZone, getPicture event probably handled outside of angular’s zone.

this.ngZone.run(() => this.userImage = result['Location'] );
3

Call a method called getPicture after uploading to aws and assign the image to a var.