如何在 Firebase 实时数据库中实现我的照片？

Question

我刚刚学会了如何通过Ionic Native SDK拍照并上传到

我怎样才能显示其个别活动的照片？从本质上讲，我最终应该得到这样一个显示的图像：（注意它是如何具有相应的标题的。）

现在，我可以添加活动标题、描述、位置和类别。我需要能够与他们同时推送图像。

我的代码：

import { Component } from '@angular/core';
import { IonicPage, NavController, ToastController, NavParams } from 'ionic-angular';

import { Events } from '../../models/events.interface';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

import { ImagePicker } from '@ionic-native/image-picker';
import { storage } from 'firebase';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
  selector: 'page-add-event',
  templateUrl: 'add-event.html',
})
export class AddEventPage {

  event = {} as Events;

  eventRef$: AngularFireList<Events>; 

  constructor(private camera: Camera, public imagePicker: ImagePicker, public toastCtrl: ToastController, public navCtrl: NavController, public navParams: NavParams, private db: AngularFireDatabase) {
    this.eventRef$ = this.db.list('events');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddEventPage');
  }

  addEvent (event: Events) {
    this.eventRef$.push({
      eventTitle: this.event.eventTitle,
      eventDescription: this.event.eventDescription,
      location: this.event.location,
      category: this.event.category
    });
    // this.navCtrl.push(HomePage);
  }

  async takePhoto() {
    try { 
      //Defining camera options
    const options: CameraOptions = {
      quality: 50,
      targetHeight: 600,
      targetWidth: 600,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    const result = await this.camera.getPicture(options);
    
    const image = 'data:image/jpeg;base64,'+result;

    const pictures = storage().ref('pictures');
    pictures.putString(image, 'data_url')
    }

    catch(e){
      console.error(e);
    }
  
  }
  
}

<ion-content padding>

  <ion-icon class="planet" name="globe"></ion-icon>

  <h1>Create an Event</h1>
  <p>Let's bring our community together</p>

  <div class="list">

  <ion-item>
    <ion-label color="secondary" stacked>Event Title</ion-label>
    <ion-input type="text" [(ngModel)]="event.eventTitle"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="secondary" stacked>Event Description</ion-label>
    <ion-input type="text" [(ngModel)]="event.eventDescription"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label color="secondary" stacked placeholder="City, State">Location</ion-label>
      <ion-input type="text" [(ngModel)]="event.location"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label color="secondary" stacked>Category</ion-label>
      <ion-select interface = "popover" [(ngModel)]="event.category">
        <ion-option value="Environmental">Environmental</ion-option>
        <ion-option value="Education">Education</ion-option>
        <ion-option value="Other">Other</ion-option>
      </ion-select>
  </ion-item>

  <ion-item>
    <button ion-button (click)="takePhoto()">Take Photo</button>
  </ion-item>

</div>

<div class="bttn">
<button ion-button (click)="addEvent(event)">Create Event</button>
</div>

</ion-content>

我在其中显示事件的页面使用以下代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Profile } from '../../models/profile.interface';
import { Events } from '../../models/events.interface';

import { AngularFireDatabase } from 'angularfire2/database';

import { Observable } from 'rxjs';

import { AngularFireAuth } from 'angularfire2/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  profileData: Observable<Profile>;

  event = {} as Events;
  eventsData: Observable<Events[]>;

  constructor(public navCtrl: NavController, private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
    this.eventsData = this.db.list('events').valueChanges();
  }

  ionViewWillLoad(){
    this.afAuth.authState.subscribe(data => {
      if (data && data.email && data.uid) {
        this.profileData = this.db.object('profile/'+data.uid).valueChanges();
      } else {

      }
    })
  }

}

<ion-content no-bounce padding>
<div class="header"><h1>Events</h1></div>

<div class="title"><p>Nearby</p></div>

<div class="events">
    <ion-list>
        <ion-item>
            <ion-card *ngFor = "let event of eventsData | async">
            <p>{{event?.eventTitle}}</p>
            <p>{{event?.eventDescription}}</p>
            <p>{{event?.location}}</p>
            <p>{{event?.category}}</p>
            </ion-card>            
        </ion-item>
    </ion-list>
</div>
</ion-content>

如何显示特定事件的特定图像？

谢谢！！

Answer 1

Ionic 基本上使用 angular，所以如果您搜索 angular firebase 照片上传，就会有很多参考资料。

您不会将图像存储在 firebase 数据库中，您只需在数据库中引用图像 URL 文件存储在 Google Cloud Storage 中，您可以通过 google cloud 或通过 firebase 存储访问它。

即。 https://angularfirebase.com/lessons/angular-file-uploads-to-firebase-storage/