0

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.

Community
  • 1
  • 1
Ethan
  • 1,905
  • 2
  • 21
  • 50
  • Please share the [minimal, complete code that reproduces the problem](http://stackoverflow.com/help/mcve). The snippets you shared now leave too much to the imagination. The code probably also depends on the JSON structure of your database, so include a representative snippet of that (as text, no screenshot) too. – Frank van Puffelen Dec 26 '16 at 14:07
  • Frank, thanks for your response. I changed the question around-- the mail issue now being that only `boolean` values can print when referenced, but `numbers` and `strings` cannot. Thanks! – Ethan Dec 26 '16 at 14:26
  • You still didn't share the [minimal complete code that reproduces the problem](http://stackoverflow.com/help/mcve). You're much more likely to get help if you include such an [MCVE](http://stackoverflow.com/help/mcve) in your question. – Frank van Puffelen Dec 26 '16 at 22:50
  • Frank, can you check the edited question out? Thanks! – Ethan Dec 28 '16 at 23:04

1 Answers1

3

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

Mike McDonald
  • 15,609
  • 2
  • 46
  • 49