在Firebase存储中存储，检索和显示图像

Question

我有一个角度应用程序，用户可以在其中上传图像。我想将该图像用作div的背景。这不起作用，因为显示存储在Firebase中的图像的过程是我遇到的最复杂和荒谬的事情之一。

如果我正确理解了这一点，则必须下载我的应用程序的组件数据，以便获得所需图像的名称。然后，我必须查询Firebase的URL。然后，我必须将返回的URL存储在一些单独的变量中，以便可以在视图中使用它。最后，标签或我正在使用的任何内容都必须下载图像。

我只是想将存储的图像用作背景。我认为它不起作用，因为div是在getDownloadURL方法的可观察到的返回之前显示的。我该如何工作？

模板

<div fxFlex="100%"
    *ngFor="let thisImage of carouselUrls; index as i">

    {{thisImage}} // Works to display the URL when resolved
    <div [style.background]="'url('+thisImage+')'"></div> // does not work

</div>

组件-检索图像路径并将URL存储在变量中

for (var a=0; a<this.currentDesign.marketplace.images.length; a++)
{

    const ref = this.afStorage.ref(this.currentDesign.marketplace.images[a]['path']);
    this.carouselUrls.push(ref.getDownloadURL());
}