时间戳

首页 > 解决方案 > 在 ionic 4 App 上显示从 firebase 检索的照片

ionic-framework - 在 ionic 4 App 上显示从 firebase 检索的照片

问题描述

我有一个 ionic4 应用程序，我从 firebase 存储中检索一些照片并将其显示在我的应用程序的 html 页面上，现在我只能在控制台中显示照片而无法在页面上显示它。

有人可以帮助我如何在html 页面上显示照片。

我的代码如下

主页.ts

import { Component } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  storageRef: AngularFireStorageReference;

  constructor(private afStorage: AngularFireStorage) { }
  display() {
    this.storageRef = this.afStorage.ref('rasool/download2.jpg');
    this.storageRef.getDownloadURL().subscribe(url => console.log(url));
  }


}

主页.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <p>its work sir</p>
  <ion-button (click)="display()">click me</ion-button>

</ion-content>

标签： ionic-frameworkionic3ionic4

解决方案

    // home.page.ts
import { Component } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  storageRef: AngularFireStorageReference;
  public imageUrl = '';
  constructor(private afStorage: AngularFireStorage) { }
  display() {
    this.storageRef = this.afStorage.ref('rasool/download2.jpg');
    this.storageRef.getDownloadURL().subscribe(url => this.imageUrl = url);
  }
}

// home.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <p>its work sir</p>
  <img src="{{imageUrl}}" />
  <ion-button (click)="display()">click me</ion-button>
</ion-content>`enter code here`

推荐阅读