Display the correct firebase storage image in html using JS

Question

So I have a loop which is displaying the user data as expected (this works fine):

database.once("value", function(snapshot){
  snapshot.forEach(snap => {
    var r = document.getElementById('userTable').insertRow()
    var age = r.insertCell(0).innerHTML = snap.val().key;
    var aboutme = r.insertCell(1).innerHTML = snap.val().photourl;
})

The user image is stored in firebase storage like so (clicking into the folder which contains the image):

My user table looks like this:

With all the associated fields linked to that user under that and the photo_url holds the image path like:

user_photos/07KSLIkK2/D41FB90B444D-9979-22F86D69883F.jpg

Ive tried looking online but most of the answers or solutions are for android. Im pretty new to firebase.

So the question is how can i display the associated image from firebase for the user in the html table?

Thanks

Also, using:

snap.val().key; does not show that random generated number by firebase. just shows as undefined.

UPDATE

was having some difficulties so just for testing purposes i split the code up like so:

database.once("value", function(snapshot){
  snapshot.forEach(snap => {
      var storageRef = firebase.storage().ref();
      var temp_photo = storageRef.child('ref_name/mas.jpg')
      console.log(temp_photo);
      temp_photo.getDownloadURL().then(downloadURL => {
      var Photo_url = document.getElementById('images').innerHTML = downloadURL;
    })
  })
})

In my HTML i have the following:

<div id="images" class=""></div>

what this should do is display that one images for each set of data it pulls. Below are console logs (which are repeated for each set of data its pulling)

authWrapper: Qe
app_: T {firebase_: Object, isDeleted_: false, services_: Object, tokenListeners_: Array, analyticsEventRequests_: [], …}  
bucket_: "dbucketname"
deleted_: false
maxOperationRetryTime_: 120000
maxUploadRetryTime_: 600000
pool_: G {createXhrIo: function}
requestMaker_: function(e,t,r)
requestMap_: Ze {map: Map, id: -9007454433453423, addRequest: function, clear: function}
service_: nt {bucket_: J, authWrapper_: Qe, app_: T, internals_: it, ref: function, …}
storageRefMaker_: function(e,t)
Qe Prototype
location: J
bucket: "dbucketname"
path_: "ref_name/mas.jpg"

In the div it displays 1 row of the following:

https://firebasestorage.googleapis.com/v0/b/app.appspot.com/o/ref_name%2Fmas.jpg?alt=media&token=11111111-1111-1111-1111-11111111111

UPDATE 2

So it got it to work like so

database.once("value", function(snapshot){
  snapshot.forEach(snap => {
      var storageRef = firebase.storage().ref();
      var temp_photo = storageRef.child('ref_name/mas.jpg')
      console.log(temp_photo);
      temp_photo.getDownloadURL().then(downloadURL => {
        var x = document.createElement("IMG");
        x.setAttribute("src", downloadURL);
        document.body.appendChild(x);
    })
  })
})

its looping around each user and displaying the picture as expected.

But when i try to move this logic to put this image into a table, i get the following error:

IndexSizeError: The index is not in the allowed range.

this is what my table insert code looks like:

var occupant = r.insertCell(16).innerHTML = snap.val().occupation;

    var storageRef = firebase.storage().ref();
    var temp_photo = storageRef.child('ref_name/mas.jpg')
    temp_photo.getDownloadURL().then(downloadURL => {
      var x = document.createElement("IMG");
      x.setAttribute("src", downloadURL);
      r.insertCell(17).appendChild(x)
    })

var you_smoke = r.insertCell(18).innerHTML = snap.val().smoke;

UPDATE 3 - SOLUTION

This is what worked for me:

var storageRef = firebase.storage().ref();
var temp_photo = storageRef.child('ref_name/mas.jpg')
var y = r.insertCell(17).innerHTML = snap.val().photo_url;
temp_photo.getDownloadURL().then(downloadURL => {
  var y = r.insertCell(17).innerHTML = '<img src="'+downloadURL+'" width="20" height="20" />';
})

Renaud Tarnec · Answer 1 · 2019-11-06T20:23:54.830

To get the key of the DataSnapshot, you need to do snap.key, see the doc for the key property.

To get the URL of an image stored in Cloud Storage for Firebase, with the JavaScript SDK, you should use the getDownloadURL() method of a Reference.

Note that this method is asynchrnonous and therefore you need to do as follows:

  ref.getDownloadURL().then(function(downloadURL) {
    //console.log('File available at', downloadURL);
  });

Which means, in your case, that you should do something along the following lines (If I have correctly understood your data structure):

database.once("value", function(snapshot){
  snapshot.forEach(snap => {
    var r = document.getElementById('userTable').insertRow()
    var age = r.insertCell(0).innerHTML = snap.key;
    //var aboutme = r.insertCell(1).innerHTML = snap.val().photourl;
    var photRef = storageRef.child('user_photos/' + snap.key + '/' + snap.val().photourl);
    photRef.getDownloadURL().then(downloadURL => {
        var aboutme = r.insertCell(1).innerHTML = downloadURL;
    });
})

I have updated the question with some new code, as I was having difficulties getting your solution to work, although it took me further, just struggling to display the image — Gurmukh Singh, Nov 07 '19 at 10:22
I cannot look into detail at your new code for the moment, but note that to display the image you should use `.src` and not `.innerHTML`, see https://stackoverflow.com/questions/1232793/javascript-set-img-src — Renaud Tarnec, Nov 07 '19 at 10:28

score 0 · Accepted Answer · answered Nov 07 '19 at 15:08

Thanks to @RenaudTarnec's help this is the solution that worked:

var storageRef = firebase.storage().ref();
var temp_photo = storageRef.child('ref_name/mas.jpg')
var y = r.insertCell(17).innerHTML = snap.val().photo_url;
temp_photo.getDownloadURL().then(downloadURL => {
  var y = r.insertCell(17).innerHTML = '<img src="'+downloadURL+'" width="20" height="20" />';
})

Display the correct firebase storage image in html using JS

2 Answers2