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>

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

在此先感谢您的帮助。

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'

        ];
    }


}

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

1 个答案: