im trying to do a chat with Angular and Firebase. The chat works fine. But when I try to download an image from Firebase Storage, it downloads but doesn't load on the img scr in the HTML.
This is a part of my HTML: (imgChat is the important one)
<ion-content>
<ion-infinite-scroll position="top" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Cargando más mensajes...">
<ion-button (click)="loadData($event)">Cargar más mensajes</ion-button>
<div class="scroll">
<ul class="bloqueMensajes">
<li *ngFor="let msg of mensajes | async">
<div class="msgUser" *ngIf="msg.user == currentUser"><p>{{msg.text}}</p></div>
<div class="fotoOtro" *ngIf="msg.key">
<img class="imgChat" *ngIf="msg.key" id="msg.key" alt="Imagen Que Passap" [src]="listaImgDescargadasPop">
</div>
<div class="msgOtro" *ngIf="msg.user != currentUser">
<p class="nombre">{{msg.user}}</p>
<p class="texto">{{msg.text}}</p>
</div>
</li>
</ul>
</div>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Also, here is my .ts :
listaImgDescargadasPop: any;
constructor(...){
this.obtenerFotoByKey('1658225112019.jpeg');
}
This method:
async obtenerFotoByKey(key){
this.listaImgDescargadasPop = await this.fotosService.obtenerUrlByKey2(key);
console.log('listaImgDescargadasPop ='+this.listaImgDescargadasPop);
}
By this time, all works as expected. But here it appears the problem. This returns the download url and sets into [src]
obtenerUrlByKey2(key){
console.log('Entra a Obtener2');
// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/'+key);
// Get the download URL
return getDownloadURL(starsRef)
.then((url) => {
return url;
})
.catch((error) => {
console.log('ERROR');
return undefined;
});
}
}
here there is an image showing the problem
