Angular:如何使用* ngFor在Firebase存储中循环图像文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (188)

我正在构建一个具有图片上传功能的网络应用。

我可以将图像成功上传到名为“uploads”的Firebase存储文件夹中。如何使用* ngFor在HTML上的“已上传”文件夹中显示图像?我正在使用AngularFire2,Angular 6。

  upload() {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;

    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }


  public saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }
提问于
用户回答回答于

如果你使用FileList对象来保存文件,你可以做类似的事情:

<ul *ngIf="selectedFiles">
    <li *ngFor="let file of selectedFiles">
        <img src="URL.createObjectURL(file)">
    </li>
</ul

我不确定为什么你将this.selectedFiles var设置为undefined,我认为你必须在你的component.ts中的某个地方放置图像文件。

在使用FileList obj或File []获取要从db显示到component.ts的图像后,可以使用component.html中的上述代码显示它们。

扫码关注云+社区

领取腾讯云代金券