I am currently working on an Ionic app that enables users to upload images to Firebase storage. One issue I am encountering is that the image only changes once a new one is selected, after closing and reopening the app. I would like it to update immediately upon uploading, and revert back to a placeholder image as soon as it's deleted.
Although the functionality is there, the uploaded image is only visible after closing and reopening the page.
TypeScript:
constructor(private router: Router,
private authService: AuthService,
private imageService: ImageService,
private afAuth: AngularFireAuth) {
this.afAuth.authState.subscribe(user => {
this.userId = user.uid
console.log('constructoruser', this.userId);
});
}
ngOnInit() {
this.firestore.ref(`/Photos/${ this.userId }/`).child('photo0').getDownloadURL().then((url) => {
this.photo0 = url;
}).catch((error) => {
console.log(error.message);
this.photo0 = 'assets/img/add-an-image.png';
console.log(this.photo0);
});
}
HTML:
<div>
<img [src]="photo0" (click)="UploadPic0('photo0')"/>
</div>