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↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .appspot/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↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .appspot/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?

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./v0/b/example.appspot./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./v0/b/example.appspot./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?

• javascript
• angularjs
• firebase
• firebase-storage

• These urls return error 404 – Zura Sekhniashvili Commented Nov 1, 2016 at 16:35
• The ?alt=media&token=sometoken aren't necessary. – Sub 6 Resources Commented Nov 1, 2016 at 16:37
• The url does not work. Not Found. Could not access bucket example.appspot. – Zura Sekhniashvili Commented Nov 1, 2016 at 17:04
• Did you get the right response. i am still stuck with this – Varun Chandran Commented Apr 6, 2018 at 5:47

5 Answers 5

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()

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

this work for me

firebase.storage().ref().child('Audios/file.wav').getDownloadURL().then(function(downloadURL) {
                        console.log('File available at', downloadURL);
 });

I was also stumbling around with the same problem a couple years later in 2020 xD turns out... I just had to configure my firebase security to public when I'm testing from this

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

to this, in the firebase rules tab

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

the below code works for me. it works for video files and images.

var ref = firebase.storage().ref().child('child');
var file = document.querySelector("#htmlInputTagID").files[0];
var task = ref.child(('file name').toString()).put(file);
var imgURL = "";
task.then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
        imgURL = url;//this is the URL I use and it works 
        //for me it can be done also for video files
    });
});