Хранилище Firebase и angularfire2

Как получить изображения из базового хранилища Fire с помощью angular fire 2. Большое спасибо!

constructor(public af: AngularFire) {
this.items = af.database.list('/message');
this.picture = af.database.list('/profile');
}

firebase firebase-storage angularfire2
person Lex Caraig    schedule 26.07.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

На данный момент нет официальной интеграции с AngularFire2 и Firebase Storage. Однако использовать обычный SDK довольно просто.

@Component({

})
class MyComponent {
  image: string;
  constructor() {
    const storageRef = firebase.storage().ref().child('path/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

Затем в вашем шаблоне

<img [src]="image" />
person David East    schedule 26.07.2016
comment
Здравствуйте, я не могу просто импортировать базу данных firebase, например import * as firebase from 'firebase'; это дает мне ошибку, например, не удается найти модуль. Спасибо! - person Lex Caraig; 26.07.2016
comment
См. [это}(stackoverflow.com/questions/38310842/) вопрос о том, как получить объект firebase - person Rob Gorman; 27.07.2016
comment
используя указанную там декларацию, она работает, но все равно выдает ошибку, что storageRef.getDownloadUrl не является функцией. это почему? Большое спасибо! Я очень хочу понять, почему так происходит. - person Lex Caraig; 27.07.2016
comment
Извините, это опечатка с моей стороны, на самом деле это getDownloadURL, а не getDownloadUrl. Я обновил ответ. - person David East; 27.07.2016
comment
Это действительно работает, но я хочу получить все изображения. Я пытаюсь повторить путь, например ('profile/' + counter + '.jpg'); Но я думаю, что это не правильный путь? Спасибо! - person Lex Caraig; 28.07.2016
comment
Это все еще работает? Я пытаюсь использовать изображение в ionic2, но оно не работает, пока не произойдет смена страницы. На 99% это потому, что нет двухсторонней привязки. - person Xerri; 07.01.2017
comment
если у меня есть имя папки «папка», например, и включая 3 изображения, как я могу получить все изображения за один вызов? С Уважением - person Joe Sleiman; 20.04.2017
comment
while(this.i‹=3){ const storageRef = firebase.storage().ref().child('home-slider-images/slide' + this.i + '.jpg'); storageRef.getDownloadURL().then(url =› this.images.push(url)); это.i = это.i + 1; } я делаю это, но я не делаю это правильно - person Joe Sleiman; 20.04.2017

arrow_upward
4
arrow_downward

Поскольку вы используете AngularFire2, рекомендуется получить доступ к firebaseApp (экземпляру firebase) внутри модуля AngularFire2. Вот исходное решение.

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';

@Component({
  template: '<p>testing</p>'
})
export class AnyComponent {

  constructor(@Inject(FirebaseApp) firebaseApp: any) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}
person Sunly    schedule 14.10.2016
comment
если у меня есть имя папки «папка», например, и включая 3 изображения, как я могу получить все изображения за один вызов? С Уважением - person Joe Sleiman; 20.04.2017