Angular 7从Firebase获取图像

Question

尝试从火灾存储中获取图像，如何在slide.path之前添加绝对路径，或者如何检查路径并将其嵌入到组件文件的this.slide中

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>

组件

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

Answer 1

看看下面的代码片段。它使用下载URL循环，获取和更新path属性

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;
        })
      );

在模板中

<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>