Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

145
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda