从 JavaScript 文件自动生成时，<img> 标记在 <td> 标记内不起作用

Question

我目前正在从事一个学校项目，我要开发一个 DotA 2 Web 应用程序，我在其中创建了一个 HTML 表格，该表格应该显示 DotA 2 中特定英雄与其他英雄的统计数据。总共有 118 个英雄，所以表格将有 117 行。这个对局表也有四列：

• 英雄（英雄的名字）
• 玩过的游戏
• 胜率
• 优势

作为视觉参考，下图与我所追求的布局接近：（感谢 opendota.com）。

像上面的图片一样，我还想在 HERO 列的每一行中添加一个小头像头像以及英雄的名字，例如“虚空之灵”、“Rubick”和“Clockwerk”。

因为我不想在我的 HTML 代码中手动自动填充 118 行，所以我尝试开发一个 JavaScript 文件来为我执行此操作，如下所示：

const matchupTableBody = document.querySelector(".matchup-table > tbody");
const numberOfHeroes = 118;

function loadMatchups() {
    for (i = 0; i < numberOfHeroes; i++) {
        currentHero = getHero(i);
        populateMatchups(getHeroImage(currentHero));
    }
}

// Populate the table, importing the API and hero data.
function populateMatchups(heroImagePath) {

    // create new table row
    const tr = document.createElement("tr");

    // create new table cell / data
    const td = document.createElement("td");

    // load the table cell with a img tag and the heroImagePath
    td.textContent = '<img src="' + heroImagePath + '"/>';

    tr.appendChild(td);

    matchupTableBody.appendChild(tr);
}

document.addEventListener("DOMContentLoaded", () => { loadMatchups(); });

loadMatchups() 函数加载英雄图像头像路径（我已本地存储在我的机器上）并将此图像路径发送到 populateMatchups() 函数。简而言之，populateMatchups() 函数为其他 117 个英雄中的每一个创建一个新的表格行，并创建一个带有指向我机器上英雄形象头像路径的标签的新表格单元格。

但是，当由这个 JavaScript 自动生成时，这似乎不起作用，如下图所示，在我自己的表格中：

真正让我感到困惑的是，当手动插入表格的第一个元素时，以蓝色突出显示的两条路径完全可以正常工作（第一个蓝色突出显示的路径是第一行右侧的橙色家伙，第二个突出显示的路径是第一行左侧的红人）。但是从我的 JavaScript 文件生成时它不起作用。

而且我根本无法理解为什么（尽管我是 JavaScript 新手，所以我认为问题出在那儿）。任何人都可以帮助或指出正确的方向吗？

这是我的表格 HTML 代码：

<div class="matchup-table-container">
        <table class="matchup-table">
            <thead>
                <tr>
                    <th>HERO</th>
                    <th>GAMES PLAYED</th>
                    <th>WIN RATE</th>
                    <th>ADVANTAGE</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="ressources/images/heroes/axe_sb.png"></td>
                    <td> <img src="ressources/images/heroes/antimage_sb.png">
                    </td>
                    <td>50</td>
                    <td>
                        <img src="ressources/images/heroes/snapfire_sb.png">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

编辑：不幸的是，我忘记在我首先发布的 JavaScript 文件中添加匹配的关闭 "/ - 我之前尝试过，但没有奏效，所以我更改了一些内容，忘记在我发布之前更改回来。当查看我的JavaScript 通过浏览器控制台，我可以看到它的工作原理是所有 117 个标签都是使用正确的图像路径创建的，因为我可以从浏览器控制台复制图像路径并将其手动插入标签，然后它加载。

Answer 1

我认为问题在于您试图将 HTML 作为文本内容插入

尝试替换此行

// load the table cell with a img tag and the heroImagePath
td.textContent = '<img src="' + heroImagePath + '">';

有了这个：

var image = document.createElement('img');
image.setAttribute("src", heroImagePath);
td.appendChild(image);

或者这个：

td.innerHTML = '<img src="' + heroImagePath + '">';