CODEWITHSUNDEEP
javascriptfirebasefirebase-storage
Ethan
Ethan

Reputation: 2087

Firebase getDownloadURL From Storage Unable To Set Img Src

I am trying to replicate the results of this question here. I am able to call getDownloadURL() on a valid database child, but the result it returns cannot seem to be set to an IMG's src. This is the code I am currently using to try and grab the download URL:

var storage = firebase.storage();
var storageRef = storage.ref();
var imgRef = storageRef.child('profile-pictures/1.jpg');
var pulledProfileImage = imgRef.getDownloadURL();

I then push pulledProfileImage into an array by doing this:

dataArray.push(pulledProfileImage)

Send the array (along with other information) off to a function that populates a table with data. The image itself is referenced using this code here:

cell1.innerHTML = '<img id="profileImage" src="'+dataArray[0]+'">';

When I check the source code after the code executes, the src is set to [Object, Object]. I also have the script logging the result which, when it does so, looks like this:

0:C
Hc:false
N:2
Pa:null
Wb:false
ja:null
na:"https://firebasestorage.googleapis.com/v0/b/app-name-da7a1.appspot.com/..."
s:null

The strange thing is if I have the console print out a different property say, Wb from the list above by calling console.log(Array[0].Wb)it prints false out PERFECTLY.... every boolean seems to be just fine, just not strings or numbers.

For reference, my storage structure looks like this:

----root
  |
  |------profile-pictures
             |---------------------- img1.png <--the console is trying to print this one
             |
             |---------------------- img2.png

And my database structure to find the names of the images to pull is like so:

----root
  |
  |----folder1
          |
          |
          |----subfolder1
                   |
                   |
                   |----subfolder2
                           |
                           |
                           |--------img1.png
                           |
                           |--------img2.png

Basically my code navigates to subfolder two, pulls the child values, then goes into storage and tried to pull them from there.

Upvotes: 0

Views: 1932

Answers (1)

Mike McDonald
Mike McDonald

Reputation: 15963

The trick here is that getDownloadURL is an async function that happens to return a promise (as per the docs):

var storage = firebase.storage();
var storageRef = storage.ref();
var imgRef = storageRef.child('profile-pictures/1.jpg');
// call .then() on the promise returned to get the value
imgRef.getDownloadURL().then(function(url) {
  var pulledProfileImage = url;
  dataArray.push(pulledProfileImage);
});

That will work locally, but that list of URLs won't be synchronized across all browsers. Instead, what you want is to use the database to sync the URLs, like how we did in Zero To App (video, code).

Upvotes: 3

Related Questions