從Firebase中追加表格圖像

Question

我試圖在表格中添加圖像。但由於某種原因，它不顯示它們。什麼會導致這種情況？

這是jquery：

$(document).ready(function() { 
    var brandsRef = firebase.database().ref().child("Snuses"); 
    brandsRef.on("child_added", snap=> { 
     var productImageUrl = snap.child("productUrl").val(); //This is the image src 
     var brandName = snap.child("Brand").val(); 
     var product = snap.child("Products").val(); 
     var nicotine = snap.child("nicotine").val(); 

     $("#tableBody").append("<tr>" 
      + "<td>"+$("img").attr("src", productImageUrl);+"</td>" //Is this right way to do it? 
      + "<td>"+brandName+"</td>" 
      + "<td>"+product+"</td>" 
      + "<td>"+nicotine+"</td>" 
      + "</tr>"); 

    }) 
}); 

Answer 1

$("img")只是抓住了頁面上的所有圖像，因爲它是作爲一個CSS選擇器處理。你可能想要的是$("<img/>")。

在一般情況下，你的代碼看起來可能是這樣的：

var $row = $('<tr></tr>').appendTo('#tableBody'); 
$('<td></td>').appendTo($row).append($('<img />').attr('src', productImageUrl)); 
$('<td></td>').appendTo($row).text(brandName); 
$('<td></td>').appendTo($row).text(product); 
$('<td></td>').appendTo($row).text(nicotine);