Firebase storage and angularfire2

Question

How do to get the images from Fire base storage using angular fire 2. Thanks a lot!

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

Answer 1

Right now there isn't an official integration with AngularFire2 and Firebase Storage. However, it's quite easy to use the regular SDK.

@Component({

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

Then in your template

<img [src]="image" />

Answer 2

Since you are using AngularFire2, it is a good idea to access firebaseApp (firebase instance) inside AngularFire2 module. Here is the original solution.

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);
  }
}