[Ionic]从 Firebase 存储中检索图像的最佳方式是什么？

Question

就像标题所反映的那样，我发现很难显示我存储在 firebase 上的图像。我在路径之前保存以获得完整的 url 并将其推送到 img 标签中。这是我的想法：

文件.ts：

//imageList contains the url of each image 
urlImages : Array<string> = [];
for(let img of this.imageList ) {
      this.firestore.ref(img.url).getDownloadURL().then((url) => {
      console.log("promise "+url);
      this.urlImages.push(url);
    });
}

在 file.html 中：

<ion-item-sliding   *ngFor='let img of urlImages'>
     <img [src]="img" />
  </ion-item-sliding>

我是离子和角度环境的初学者...

提前感谢您的帮助。

Answer 1

将它们放到标志性的home 页面

 <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>

      <h2>Welcome to Ionic!</h2>

    <ion-list>
      <ion-item *ngFor="let item of imagelink">
        <ion-thumbnail slot="start">       
          <img src= {{item}} >
        </ion-thumbnail>      
      </ion-item>
    </ion-list>
    </ion-content>

2.将这些文件添加到home.ts文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
 groceries: any;

    constructor(public navCtrl: NavController) {

        this.imagelink= [
            'https://www.gstatic.com/webp/gallery3/1.sm.png',
            'https://www.gstatic.com/webp/gallery3/1.sm.png',
            'https://www.gstatic.com/webp/gallery3/1.sm.png',
            'https://www.gstatic.com/webp/gallery3/1.sm.png',
            'https://www.gstatic.com/webp/gallery3/1.sm.png',
            'https://www.gstatic.com/webp/gallery3/1.sm.png'

        ];
    }


}