Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

146
Views
Angular Firestore Storage[src] does not load

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

about 4 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!