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

Question

用户特定信息个人资料图片显示我修复了以前遇到的大量错误。目标：动态显示所有注册用户，并在他们的个人资料照片下显示他们的名字。它现在做什么：在单独的 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); 下面的第二个到最后一个}） ;) 向 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);

   });

 }