如何在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基本上使用角度的，因此，如果您要搜索角度火力地基照片上傳，則會有很多參考。

您不要將圖像存儲在Firebase數據庫中，而只引用文件中存儲在Google Cloud Storage中的數據庫中的圖像URL，您可以通過Google Cloud或Firebase存儲訪問該圖像。

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