Javascript 图片未正确填充 HTML table

Question

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

我需要两张特定的图像来随机填充整个 table。我的代码成功创建了适当长度的数组并将其正确转换为 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 元素，并将其值设置为图像的路径：

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

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

Javascript 图片未正确填充 HTML table

Javascript image not populating in HTML table correctly

javascript

image

html-table

populate