Firebase storage getDownloadURL() doesn't return a working url

Question

I tried to use getDownloadURL() method to retrieve the url of my images which stored in firebase storage.

Weird is it returns a url which is an object, instead of images

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓EXAMPLE URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑EXAMPLE URL↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

I did some research online and found out the correct url to display my image should be like this...

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓EXAMPLE URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png?alt=media&token=sometoken
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑EXAMPLE URL↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

But I have no clue how to get the url by using getDownloadURL()...

Here's my code...

var storage = firebase.storage();

$scope.getImgUrl = function(file) {
    storage.ref("images/" + file + ".png")
      .getDownloadURL()
      .then(function onSuccess(url) {
        return url;
      })
      .catch(function onError(err) {
        console.log("Error occured..." + err);
      })
  }

Any idea?

Answer 1

So the correct way to get an image url from Firebase is this:

 $scope.getImgUrl = function(file) {
        storage.child("images/" + file +".png").getDownloadURL().then(function(url) {
          return url;
        }).catch(function(error) {
          // Handle any errors here
        });
 }

Note that you are using storage.child() instead of storage.ref()

Answer 2

The return you have in the then() callback doesn't do what you expect it to do. When you call getDownloadUrl() it returns a promise. If you simply bind that promise to the scope, you can use it in your HTML:

$scope.getImgUrl = function(file) {
    return storage.ref("images/" + file + ".png").getDownloadURL();
}