如何将图像 url 从 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(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;
}

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