Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

147
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda