2017-02-26 32 views
4

我想將Firebase Storage中的所有圖片顯示在桌面上。我似乎很難在JavaScript中這樣做。它給我一個錯誤:顯示Firebase中的所有圖片

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> 

這裏是我的數據庫:

database

,這裏是我當前的HTML表:

HTML Table

回答

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