javascript - 如何将firebase中的图像url显示到html表中？

Question

我对如何在 html 表格中显示图像有疑问。

根据下面的代码，图像列仅显示图像的链接，而不显示图像本身。如何将实际图像显示到我的图像列中？

 root.on('child_added', function(childSnapshot) {
        rootRef10 = childSnapshot.val();
        var tr = document.createElement('tr');
        tr.appendChild(createCell(imageUrl));
        tr.appendChild(createCell(videoUrl));
        table.appendChild(tr);
    });

  function createCell(text) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(text));
        return td;
    }

Answer 1

尝试使用这个:

// put your image url as the url parameter
function createImageCell(url) {
    var td = document.createElement('td');
    var img = document.createElement("img");
    img.src = url;
    td.appendChild(img);
    return td;
}

所以基本上用 tr.appendChild(createImageCell(imageUrl)); 替换 tr.appendChild(createCell(imageUrl));

编辑:如果您想设置宽度和高度，您可以执行以下任一操作:

function createImageCell(url) {
    var td = document.createElement('td');
    var img = document.createElement("img");
    img.src = url;
    img.width = 800; // specify width here
    img.height = 800; // specify height here
    td.appendChild(img);
    return td;
}

或者，如果您希望每个图像具有不同的宽度和高度，您可以这样做:

function createImageCell(url, width, height) {
    var td = document.createElement('td');
    var img = document.createElement("img");
    img.src = url;
    img.width = width;
    img.height = height;
    td.appendChild(img);
    return td;
}

然后每当调用该方法时指定每个图像的宽度和高度。