[Ионический] Каков наилучший способ получения изображений из хранилища Firebase?

Question

Как видно из названия, я обнаружил трудности с отображением изображений, которые я храню на базе Firebase.Я сохранил перед путями, чтобы получить полный URL и вставить его в тег img.вот моя идея:

file.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>

Я начинающий с ионной и угловой env ...

Так что заранее спасибо за вашу помощь.

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 file

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'

        ];
    }


}