所以我有一个循环，按预期显示用户数据（这很好）：

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随机生成的数字。只是显示为未定义。

更新

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

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

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