Блог

Как следует из названия, я столкнулся с трудностями при отображении изображений, которые я храню в 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>
  

Я новичок в ionic и angular env…

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

Поместите их на страницу iconic 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'

        ];
    }


}