javascript - 使用 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 中存储的图像的网址，您应该使用 getDownloadURL()方法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;
    });
})