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

更新

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

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

要获取DataSnapshot 的key，您需要执行snap.key，请参阅key 属性的文档。

要使用 JavaScript SDK 获取存储在 Cloud Storage for Firebase 中的图像的 URL，您应该使用 Reference 的 getDownloadURL() 方法。

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

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