Отобразить правильный образ хранилища Firebase в формате HTML, используя JS

Question

Итак, у меня есть цикл, который отображает пользовательские данные, как и ожидалось (это работает нормально):

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

Изображение пользователя хранится в хранилище Firebase следующим образом (щелчок в папке, содержащей изображение):

Моя таблица пользователей выглядит следующим образом:

Со всеми связанными полями, связанными с этим пользователем, и photo_url содержит путь к изображению, например:

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

Я пытался искать в Интернете, но большинство ответов или решений для Android. Я довольно новичок в firebase.

Итак, вопрос в том, как я могу отобразить ассоциированное изображение из firebase для пользователя в html-таблице?

Спасибо

Кроме того, используя:

snap.val().key; не показывает случайное число, сгенерированное пожарной базой. просто отображается как неопределенное.

ОБНОВЛЕНИЕ

возникли некоторые трудности, поэтому просто для целей тестирования я разделил код следующим образом:

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

В моем HTML у меня есть следующее:

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

, что это должно сделать, это показать, что по одному изображению для каждого набора данных, которые он извлекаетНиже приведены журналы консоли (которые повторяются для каждого набора данных, который он извлекает)

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"

В div он отображает 1 строку следующего содержания:

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

ОБНОВЛЕНИЕ 2

Так оно и получилось так:

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

зацикливание вокруг каждого пользователя и отображение картинки, как и ожидалось.

Но когда я пытаюсь переместить эту логику, чтобы поместить это изображение в таблицу, я получаю следующую ошибку:

IndexSizeError: The index is not in the allowed range.

так выглядит код вставки в мою таблицу:

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;

ОБНОВЛЕНИЕ 3 - РЕШЕНИЕ

Вот что у меня сработало:

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" />';
})

Answer 1

Чтобы получить key из DataSnapshot, вам нужно сделать snap.key, см. Документ для свойства key.

Чтобы получить URL-адрес изображения, хранящегося в Cloud Storage for Firebase, с помощью JavaScript SDK, вы должны использовать метод getDownloadURL() для *1014*Reference.

Обратите внимание, что этот метод является асинхронным, и поэтому вам нужно сделать следующее:

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

Что означает, что в вашем случае вы должны сделать что-то по следующим направлениям (Если я правильно понял ваши данныеструктура):

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

Answer 2

Благодаря помощи @ RenaudTarnec это решение сработало:

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" />';
})