Тег <img> не работает внутри тега <td> при автоматическом создании из файла JavaScript

В настоящее время я работаю над школьным проектом, где я должен разработать веб-приложение для DotA 2, где я создал HTML-таблицу, которая должна отображать статистику конкретного героя из DotA 2 по сравнению с другими героями. Всего героев 118, поэтому в таблице будет 117 строк. Эта таблица соответствий также имеет четыре столбца:

• Герой (имя героя)
• Игр сыграно
• Шанс на победу
• Преимущество

Для визуальной справки, изображение ниже близко к тому же макету, к которому я стремлюсь: (кредит opendota.com).

Как и на изображении выше, я также хотел бы иметь небольшой аватар изображения вместе с именем Героя в каждой строке в столбце HERO, например, «Void Spirit», «Rubick» и «Clockwerk».

Поскольку я не хочу вручную заполнять 118 строк в своем HTML-коде, я попытался разработать файл 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 тегов создаются с правильным путем к изображению, поскольку я могу скопировать путь к изображению из консоли браузера и вручную вставить его в тег, а затем он загружается.