Javascript 图像未正确填充在 HTML 表中

Question

我正在学习如何将 JavaScript 合并到 HTML 中，并尝试基于课堂项目构建一个非常简单的网页游戏。 （这是一个侧边栏，我成功地完成了项目本身。）

我需要两个特定的图像来随机填充整个表格。我的代码成功创建了适当长度的数组并将其正确转换为 HTML，但图像源似乎没有正确填充。每个图像总是显示一张图像，因此我确信我的源路径是正确的，并且其中一张图像始终位于右下角，但该字段的其余部分是空白的。在检查 DevTools 时，该数组具有适当的 img 属性，但没有源，显然除了具有可见图像的 img 之外。

class Field {

    static generateField(h, w, pct = .2) {
        let board = [];
        let tempArray = [];
        while (board.length < h) {
            while (tempArray.length < w) {
                const random = Math.random();
                if (random < pct) {
                    tempArray.push(imageB);
                } else {
                    tempArray.push(imageA);
                }
            }
            board.push(tempArray);
        }

        for (let a = 0; a < h; a++) {
            let row = document.createElement("tr");
            for (let b = 0; b < w; b++) {
                let cell = document.createElement("td");
                let img = document.createElement("img");
                img = board[a][b];
                img.style.width = "100%";
                img.style.height = "100%";
                cell.appendChild(img);
                row.appendChild(cell);
            }
            tblBody[0].appendChild(row);
        }
    }
}

tblBody 是在class 之外定义的。最初，我的代码是嵌套的 for 循环，并给出了完全相同的结果。

我哪里错了？

Answer 1

我假设 imageA 和 imageB 是图像文件的路径。如果是这样，您的问题就在这里：

let img = document.createElement("img");
img = board[a][b];

您将新创建的元素 object 分配给 img，然后重新分配一个 string （图像的路径） ) 到同一个变量。

相反，您必须向您创建的 img 元素添加一个 source 属性，并将其值设置为图像的路径：

let img = document.createElement("img");
img.setAttribute("src", "<path to imageB>");

然后您可以附加 img 元素，完成及其 src 属性到单元格。