Display all images from storage in Firebase

I want to display all my images from Firebase Storage in a table. It seems to be hard for me to do this in JavaScript . This gives me an error:

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>

Here is my database:

database

and here is my current HTML table:

HTML Table

+4
source share
1 answer

Uhh .. it turned out that I fixed it myself. I will post an answer here so that it can help other people.

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>" );
});
+1
source

Source: https://habr.com/ru/post/1670867/


All Articles