如何显示从Firebase到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(createCell(imageUrl)); 与tr.appendChild(createImageCell(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;
}

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