使用JS在html中显示正确的Firebase存储图像

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的新手。

所以问题是如何在HTML表格中为用户显示来自Firebase的关联图像？

谢谢

也使用：

snap.val().key;不会显示Firebase随机生成的数字。只是显示为未定义。

UPDATE

遇到了一些困难，所以仅出于测试目的，我将代码分成如下：

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中显示以下一行：

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

UPDATE 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;

UPDATE 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，您需要执行DataSnapshot，请参阅snap.key属性的文档。

[要使用JavaScript SDK获取存储在Firebase的Cloud Storage中的图像的URL，您应该使用key的key方法。

请注意，此方法是异步的，因此您需要执行以下操作：

getDownloadURL()

在您的情况下，这意味着您应该按照以下方式进行操作（如果我正确理解了您的数据结构，则：：

getDownloadURL()

Answer 2

感谢@RenaudTarnec的帮助，这是有效的解决方案：

Reference