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

2023年12月31日 181次阅读

我想在桌面上显示Firebase存储中的所有图像.我似乎很难在
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表格：

最佳答案 呃..事实证明我已经自己解决了这个问题.我将在这里发布答案,这可能会对其他人有所帮助.

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>" );
});
点赞