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

Question

我在存储桶中保存了一些图像。我试图加载这些图像在我的模板，基于agencyId。现在，我得到了图像，但前提是我把路径放进去。如何获得我的agencyId -这是我的图像的名称到我的组件，然后添加图像etx，或者我如何改变我的代码在我的组件，然后我如何得到它在我的模板。

我的组件

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和其他数据。当您以后想要从存储中删除或更新文件时，这也很有用。