如何从 Firebase 获取图像路径，从 Firebase 存储获取图像并显示它？

Question

我正在尝试；

从 firebase 数据库获取图像路径
从 firebase 存储中获取图像
显示这张图片

我用Angular2/Angularfire2

这是我当前的代码；

 this.products = af.database.list('products/')
    this.products.subscribe((data: any) => {
        data.forEach(item => {
          firebase.storage().ref().child('products/' + item.img)
            .getDownloadURL()
            .then(url => {
              item.image = url;
            });
        })
      }
    )

这是我的模板；

<ion-card *ngFor="let item of products |async" text-center
      [ngStyle]="item.image ? {'background': 'url(' + (item?.image) + ')'} : {}">

我能够获取路径并下载 url。

但是我无法显示它。

任何帮助都会很棒！

Answer 1

我通过添加额外的数组并显示它来完成临时解决方案。仍然欢迎任何解决方案。

this.productss = []

this.products = af.database.list('/products')
this.products.subscribe((data: any) => {
    data.forEach(item => {
      firebase.storage().ref().child('products/' + item.img)
        .getDownloadURL()
        .then(url => {
          item.image = url;
          this.productss.push(item)
        });
    })
  }
)

如何从 Firebase 获取图像路径，从 Firebase 存储获取图像并显示它？

How can I get image path from Firebase, get image from firebase storage, and show it?

image

download

show

angularfire2