显示 Firebase 中存储的所有图像答案

【问题标题】：Display all images from storage in Firebase显示 Firebase 中存储的所有图像
【发布时间】：2017-07-17 01:19:40
【问题描述】：

我想在一张桌子上显示我所有来自 Firebase 存储 的图像。我似乎很难在 JavaScript 中这样做。它给了我一个错误：

Firebase 存储：对象“Item_Images/”不存在。

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 表格：

【问题讨论】：

标签： jquery firebase firebase-realtime-database firebase-storage

【解决方案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>" );
});

【讨论】：