为何JavaScript无法在image-grid类中创建image div？

我正在SkillShare课程中学习为自由艺术页面创建响应式图片画廊，当前目标是用JavaScript在页面填充图片。尝试在名为image-grid的类容器内创建带image类的div，该div需包含images文件夹中的画作。

我的HTML代码 #

<body>
    <div class="gallery-container">
        <h2 class="gallery-title">Illustrations and Comics by Gwen</h2> 
        <div class="image-grid">
        </div>
    </div>
</body>

我的JavaScript代码 #

const imagesList = [
    {
        imageUrl: "images/DyingToLive.png",
        title: "Dying to Live",
    },
];

const imageGrid = document.querySelector(".image-grid");

const populateImages = () => {
    imagesList.forEach((i) => {
        const image = document.createElement("div");
        image.classList.add("image");
        const img = document.createElement("img");
        img.src = i.imageUrl;
        img.alt = i.title;
        image.appendChild(img);
        imageGrid.appendChild(image);
    });
};

populateImages();

教师的JavaScript版本 #

我和搭档已逐行对比代码差异，仅因未使用缩略图用imageUrl替代了thumbUrl，其余与教师版本一致。但浏览器中无图片，源代码也无image-grid内的image div，恳请提供排查方向。

内容的提问来源于stack exchange，提问作者coderookie