如何在文本类游戏特定对话出现后替换图片？

我正在制作一款文本类恐怖游戏，目前遇到一个问题：需要在特定文本对话出现后替换图片。
我曾尝试直接在HTML中添加新图片的src，但新图片显示在原有图片下方，并非替换效果。此前我曾提问但表述有误（我非母语者且对编码术语不熟悉），仅实现了在特定文本后显示图片的效果，但这并非我想要的。希望有人能提供帮助。

要实现替换现有图片而非新增图片，核心是修改页面上已有<img>元素的src属性，而非添加新的图片标签。具体实现步骤如下：

• 重构文本数据结构，让每个文本段落对应一张目标图片地址，方便精准触发替换逻辑
• 在文本段落完全展示完毕的时机，获取页面上的图片元素，更新其src属性为对应图片地址
• 可选：处理文本循环或结束的边界逻辑

JavaScript 代码 #

// 重构数据：每个元素包含文本内容和对应要替换的图片地址
var objects = [
  {
    text: "The rain goes clickety clack tack. It was a cold night and a ruthful glimmer of azure pervaded the skies, which were dormantly laid above the cosmopolitan city. The children quietly wept under tattered rags and the grown ups began celebrating on the filth-stained juice joints, while the Plenilune was shining brightly upon them, giving an everlasting impression of cruel romanticism.",
    imgSrc: "https://risdmuseum.org/sites/default/files/styles/scaled_900/museumplus/51848.jpg"
  },
  {
    text: "Me and Mary went on a ride with the new red car through the woods. We had an argument about Helena. And then an accident happened. The car crashed. I-I hope she's dead.",
    imgSrc: "这里替换成第二段文本对应的图片地址"
  },
  {
    text: "I wandered the woods and the memories slowly faded away. The insects were buzzing and the birds were chirping. As I was walking towards the forest's insides, I came across a group of people mourning over a mutilated body.",
    imgSrc: "这里替换成第三段文本对应的图片地址"
  },
];

function toggleFullScreen(elem) {
  if (
    (document.fullScreenElement !== undefined &&
      document.fullScreenElement === null) ||
    (document.msFullscreenElement !== undefined &&
      document.msFullscreenElement === null) ||
    (document.mozFullScreen !== undefined && !document.mozFullScreen) ||
    (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)
  ) {
    if (elem.requestFullScreen) {
      elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
      elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

const paragraph = document.getElementById("doThis");
const gameImage = document.getElementById("img");
const writeSpeed = 30;
let letterIndex = 0;
let objectsIndex = 0;

function write() {
  const currentItem = objects[objectsIndex];
  if (!currentItem) return; // 所有文本展示完毕后停止
  const sentence = currentItem.text;
  
  if (letterIndex > sentence.length) {
    // 文本展示完毕，替换图片
    gameImage.src = currentItem.imgSrc;
    letterIndex = 0;
    objectsIndex++;
    // 如果要循环展示，取消下面的注释
    // if (objectsIndex >= objects.length) objectsIndex = 0;
    return;
  }
  paragraph.innerHTML += sentence.charAt(letterIndex);
  letterIndex++;
  setTimeout(write, writeSpeed);
}

function help() {
  paragraph.innerHTML = "";
  // 重置索引，重新开始
  letterIndex = 0;
  objectsIndex = 0;
  // 可选：重置初始图片
  // gameImage.src = objects[0].imgSrc;
  write();
}

HTML 代码 #

<center><img src="https://risdmuseum.org/sites/default/files/styles/scaled_900/museumplus/51848.jpg" id="img"></center>
<input type="button" value="Fullscreen" onclick="toggleFullScreen(document.body)">
<div class="form">
    <button onclick="help();">click</button>
    <p id="doThis" data-index="-1"></p>
</div>

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