在个人资料图片 Firebase Web Realtime-Database 下显示名称

Question

User specific infoProfile pic display我修复了我之前遇到的大量错误。 目标：动态显示所有注册用户，其姓名显示在他们的个人资料图片下方。 它现在的作用：动态显示所有用户（当您单击它时会显示特定的用户信息）和单独的 div 中的个人资料图片。 图像：显示的动态图像 片段：

const dbRef = firebase.database().ref();
const usersRef = dbRef.child('userInfo');
const userListUI = document.getElementById("userList");
usersRef.on("child_added", snap => {
  let user = snap.val();
  let $h3 = document.createElement("h3");
  $h3.innerHTML = user.name;
  $h3.setAttribute("child-key", snap.key);
  $h3.addEventListener("click", userClicked)
  userListUI.append($h3);
});

function userClicked(e) {
  var userID = e.target.getAttribute("child-key");
  const userRef = dbRef.child('userInfo/' + userID);
  const userDetailUI = document.getElementById("userDetail");
  userDetailUI.innerHTML = ""
  userRef.on("child_added", snap => {
    var $p = document.createElement("p");
    $p.innerHTML = snap.key + " - " + snap.val()
    userDetailUI.append($p);
  });
}

var storage = firebase.storage();
var storageRef = storage.ref();
$('#List').find('tbody').html('');

var i = 0;
storageRef.child('users').listAll().then(function(result) {
  result.items.forEach(function(imageRef) {
    i++;
    displayImage(i, imageRef);
  });
});

function displayImage(row, images) {
  images.getDownloadURL().then(function(url) {
    // console.log(url);
    let new_html = '';
    // new_html += '<tr>';
    new_html += '<td>';
    // new_html += '</td>';
    // new_html += '<td>';
    new_html += '<img src= "' + url + '">';
    new_html += '</td>';
    // new_html += '</tr>';
    new_html += row;
    $('#List').find('tbody').append(new_html);
  });
}

<table id="List">
  <tbody>

  </tbody>
</table>

<br><br>

<ul id="userList"></ul>
<div id="userDetail">
  <p>
    <strong class="detailName"></strong>
  </p>
</div>

我为尝试修复所做的事情：谷歌搜索，玩弄显示图像功能（尝试将 $('#List').find('tbody').append(new_html); 移动到第二个以下last });) 向 new_html 添加一些内容以显示名称，但是 images.getDownloadURL 会弄乱我尝试过的其他内容，因为如果我在它之后或之前添加另一个函数，我会收到一个错误，因为图像存储在存储中并且用户信息在实时数据库中。有什么指点吗？

Answer 1

 var userData = docRef.collection("userInfo");
 usersRef.on("child_added", snap => {
     let user = snap.val();
     let $ul = document.createElement("ul");
     $ul.innerHTML = user.name;
     $ul.setAttribute("child-key", snap.key);
     $ul.addEventListener("click", userClicked) 
     userListUI.append($ul);
 });
 function userClicked(e) {
   var userID = e.target.getAttribute("child-key");
   const imageRef = storageRef.child('users/' + userID);
   const userRef = dbRef.child('userInfo/' + userID);
   // window.location = 'profileview.html';
   const userDetailUI = document.getElementById("userDetail");
   userDetailUI.innerHTML = "";
   userRef.on("child_added", snap => {
       var $ul = document.createElement("ul");
       $ul.innerHTML = snap.key + " - " + snap.val() 
       userDetailUI.append($ul);
   });
 }