jquery - 显示 Firebase 存储中的所有图像

Question

我想在表格上显示 Firebase Storage 中的所有图像。我似乎很难在 JavaScript 中做到这一点。它给了我一个错误:

Firebase Storage: Object 'Item_Images/' does not exist.

var fbRef = firebase.database().ref().child("Item Posts");
var storage = firebase.storage().ref();
var storageRef = storage.child("Item_Images/");

fbRef.on("child_added", snap => {
    var name = snap.child("ItemName").val();
    var price = snap.child("Price").val();
    var category = snap.child("Category").val();
    var description = snap.child("Description").val();
    var image = storageRef.getDownloadURL().then(function(url){
        var test = url;
        document.querySelector('img').src = test;
    })

    $("#tableBody").append("<tr><td>" + image + "</td><td>" + name + "</td><td>" + price + "</td><td>" + category + "</td><td>" + description + "</td></tr>" );
});

HTML

<table>
    <tr class="heading">
        <td width="20%">Image</td>
        <td width="20%">Name</td>
        <td width="10%">Price</td>
        <td width="15%">Category</td>
        <td width="35%">Description</td>
    </tr>
    <!-- display data here -->
    <tbody id="tableBody"></tbody>
</table>

这是我的数据库:

这是我当前的 HTML 表:

Answer 1

呃..原来是我自己解决了这个问题。我将在这里发布答案，以便对其他人有所帮助。

var fbRef = firebase.database().ref().child("Item Posts");
//removed the storage reference

fbRef.on("child_added", snap => {
    var name = snap.child("ItemName").val();
    var price = snap.child("Price").val();
    var category = snap.child("Category").val();
    var description = snap.child("Description").val();
    //got the string URL from the database
    var image = snap.child("Image").val();

    //concatenated the img tag using the image variable at the top
    $("#tableBody").append("<tr><td><img src=" + image + "/img></td><td>" + name + "</td><td>" + price + "</td><td>" + category + "</td><td>" + description + "</td></tr>" );
});