Отображение фотографии, полученной из firebase, в приложении ionic 4 - PullRequest
Новая
       5

Отображение фотографии, полученной из firebase, в приложении ionic 4

0 голосов
/ 01 февраля 2019

У меня есть приложение 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>

1 Ответ

0 голосов
/ 01 февраля 2019 
    // 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`
...