使用 Firestore 存储从存储桶获取图像的 Angular

Question

我在存储桶中保存了一些图像。我正在尝试根据 AgencyId 在我的模板中加载这些图像。现在，我正在获取图像，但前提是我放置了路径。如何获取我的 AgencyId - 这是我的图像的名称到我的组件中，然后添加图像 etx，或者我将如何更改 myu 组件中的代码，然后如何在我的模板中获取它。

我的组件

import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
import {tap} from 'rxjs/operators';
import {AngularFirestore} from '@angular/fire/firestore';
import {Agency} from './Agency.interface';
import {AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask} from '@angular/fire/storage';

@Component({
  selector: 'app-agencies',
  templateUrl: './agencies.component.html',
  styleUrls: ['./agencies.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush

})
export class AgenciesComponent implements OnInit {
  ref: AngularFireStorageReference;
  logoUrl: any;
  bcUrl: any;
  filePath: string;


  agencies$ = this.afs.collection<Agency[] | any>('agencies').valueChanges().pipe(tap(console.log));

  constructor(public afs: AngularFirestore, private afStorage: AngularFireStorage) {
    const storage = this.afStorage.storage.app.storage(
   'gs://agency-logos-paid-keeper');
    this.logoUrl = storage.ref().child(`/thumbnails/12345678910_700x100.png`)
      .getDownloadURL();


  }

我的模板

<div class="clr-row" *ngIf="agencies$ | async as agencies">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card" *ngFor="let agency of agencies">
      <div class="card-header">
        <div><b>{{agency.name}}</b></div>
        <div>{{agency.phone |slice:0:3 }}-{{ agency.phone
          | slice:3:6 }}-{{ agency.phone | slice:6:10 }}</div>

      </div>
      <div class="card-block">
        <div class="card-media-block">
          <div class="card-media-description">
            <img [src]="logoUrl | async" class="card-media-image" alt="AFS" id="logoImg"/>
          </div>
        </div>
        <div class="card-text">

<!--          <div class="card-media-block">-->
<!--            <div class="card-media-description">-->
              <img src="/assets/card.png">
          Time Sheet:
          <span *ngIf="agency.pocTimesheetRequired == true"><cds-icon shape="success-standard"
                                                                      solid></cds-icon></span>
          <span *ngIf="agency.pocTimesheetRequired == false"><cds-icon shape="times" solid></cds-icon></span>
<!--            </div>-->
<!--          </div>-->
          <!--            {{agency.pocTimesheetRequired}}-->
<!--          (click)="uploadImage($event, agency.agencyId)"-->
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-primary"
                routerLink="/agencies/edit-agencies/{{agency.agencyId}}"
        >Edit Agency
        </button>
        <button class="btn btn-sm btn-warn"

        >Add Agency
        </button>
      </div>
    </div>
</div>
</div>

Answer 1

解决方法不是从存储桶中获取图片，而是将存储桶中保存的文件的url存储到Firestore中。

const ref = this.storage.ref('/path/to/file.ext')  // Filepath 

// 'file' comes from the Blob or File API
ref.put(file).then((snapshot) => {
  snapshot.ref.getDownloadURL().then(
    url => {
      // Save the url alongwith agency data in the same collection 
    }
  )
});

现在，您将始终拥有文件的 url 以及其他数据。当您以后想要从存储中删除或更新文件时，这也很有用。