JS运行后在DOM中加载的图像

我遇到了一个非常奇怪的问题。我有一个简单的猜谜游戏，问四个问题。它接受带有警报的用户输入，打印到DOM，无论用户猜测是否正确，然后显示一个图像（绿色复选框或红色x），然后转到下一个问题。等等，等等。

问题：游戏运行，将消息打印到DOM，但直到整个游戏结束才显示图像。

奇怪的是，chrome控制台清楚地显示img元素的"src"属性正在被正确地修改（并且文件树被正确地排列以访问图像）。相反，会出现一个空白框。当然，直到比赛结束。

我的HTML外观示例：

<p id="question1" class="rightAnswer" class="wrongAnswer"></p>
<img id="img1" src="" width="100">

JS函数（IIFE）。每个问题都有一个功能，它们看起来都和这个相同：

var question1 = (function() {
  var userAnswer1 = prompt(arrayQuestions[0]);
  if((userAnswer1.toUpperCase() === "BOSTON") || (userAnswer1.toUpperCase() === "BOS")) {
    // inserts correct or incorrect message after user guesses
    document.getElementById('question1').innerHTML= arrayAnswerCorrect[0];
    // changes color of that message
    document.getElementById('question1').style.color = "green";
    // inserts image via 'src' attribute
    document.getElementById('img1').src = "images/correct.png";
    scoreIt++;
  } else {
    document.getElementById('question1').innerHTML = arrayAnswerIncorrect[0];
    document.getElementById('question1').style.color = "red";
    document.getElementById('img1').src = "images/incorrect.png";
  };
}());

提前谢谢。这真是难住我了。