在个人资料图片下显示名称 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

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