Question

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

有人可以帮我怎样在 html页面上显示照片。

我的代码在下面

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;

  constructor(private afStorage: AngularFireStorage) { }
  display() {
    this.storageRef = this.afStorage.ref('rasool/download2.jpg');
    this.storageRef.getDownloadURL().subscribe(url => console.log(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>
  <ion-button (click)="display()">click me</ion-button>

</ion-content>

Answer 1

    // 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`

在ionic 4 App上显示从Firebase检索的照片

1 个答案: