在配置文件圖片下顯示名稱 Firebase Web 實時數據庫

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>

我所做的嘗試修復：谷歌搜索，玩弄顯示圖像 function （嘗試移動 $('#List').find('tbody').append(new_html); 在倒數第二個}下方） ;) 向 new_html 添加一些內容以顯示名稱，但 images.getDownloadURL 會弄亂我嘗試過的其他內容，因為如果我在它之后或之前添加另一個 function，我會收到一個錯誤，因為圖像存儲在存儲中並且用戶信息是在實時數據庫中。 任何指針？

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);
   });
 }