Angular 7 get images from firebase

Question

Trying to get image from firestorage, how can I add absolute path before slide.path or how can I check path and embed it in this.slide in component file

html

<div class="media text-muted pt-3 pb-3 border-bottom" *ngFor="let slide of slides">
    <img [src]="slide.path" class="bd-placeholder-img mr-2 rounded" width="100" height="100" />
    <p class="media-body mb-0 small lh-125 border-gray">
        <strong class="d-block text-gray-dark">{{ slide.name }}</strong>
    </p>
</div>

component

this.serv.getSlides().subscribe( res => {
  this.slides = res.map(item => {
    return {
      id: item.payload.doc.id,
      ...item.payload.doc.data()
    } as Slides;
  });
  console.log(this.slides);
});

Firstore

FireStorage

Possible duplicate of [firebase storage - getting image URL](https://stackoverflow.com/questions/38424203/firebase-storage-getting-image-url) — Tushar Walzade, Mar 13 '19 at 06:46

score 0 · Answer 1 · answered Mar 13 '19 at 12:30

Have a look at the below snippet. It loops, fetches and updates the path property with the download URL

return this.afs
      .collection('Projects')
      .doc(projectId)
      .collection('Files')
      .valueChanges()
      .pipe(
        map(files => {
          files.forEach(file => {
            file.path = this.storage.ref(file.ref).getDownloadURL();
          });
          return files;
        })
      );

And in the template

<ul class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let file of projectFiles">
        <div>
          <p class="mb-1 file-name">
            <i class="far fa-file mr-2"></i>
            {{file.name}}
          </p>
          <p class="mb-0 meta">Uploaded by
            <span [appUserName]="file.userId"></span>
            <span>, {{(file.createdAt.seconds | amFromUnix)| amTimeAgo}}</span>
          </p>
        </div>

        <div>
          <a [href]="file.downloadURL | async" target="_blank" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-cloud-download-alt mr-1"></i>
            <span>Download</span>
          </a>
        </div>

      </li>
    </ul>

Angular 7 get images from firebase

1 Answers1