CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestore
win4win
win4win

Reputation: 363

Applying images to app from FireStore Storage

So I'm successfully able to upload images to FireStore Storage.

Now I'm trying to apply images stored in FireStore into people's user profiles on the app.

import {ActivatedRoute} from '@angular/router';
import { AngularFireStorage } from 'angularfire2/storage';

export class ProfileComponent implements OnInit {

  routeParams;
  profilePicture: any = "../../assets/default-img.png"

  constructor(
  private afStorage: AngularFireStorage,
  private route: ActivatedRoute,
  ) { }


  ngOnInit() 
  {
    this.routeParams = this.route.params.subscribe(
      params => {
          /*Update Variables here*/
          if (email.__email != "")
          {
            let path = "/" + email.__email + "/profile.png";
            this.profilePicture = this.afStorage.ref(path).getDownloadURL();
          }
      });
  }
}

All I want to do is retrieve the img from FireStore Storage and apply it to a person's profile picture.

Upvotes: 0

Views: 51

Answers (1)

Andrea
Andrea

Reputation: 329

Check out the documentation here.

'getDownloadURL()' returns a promise, so you have to resolve that promise to actually get the data from the URL. If your HTML template is using profilePicture, you can just set the URL as the image source in ngOnInit():

this.afStorage.ref(path).getDownloadURL().then(function(url) {
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

Upvotes: 2

Related Questions