Reputation: 2087
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
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