JavaScript图片测验图片加载失败404错误排查求助

我正在开发一个简易JavaScript图片测验项目，目前完成了题目和选项的显示功能，但调用测验时图片无法加载，出现404资源加载失败错误。图片文件本身正常，试过.png和.jpg格式都不行。后续还要添加checkAnswer、得分显示等功能，但现在得先解决图片作为答题按钮加载失败的问题。

HTML代码 #

<section id="quiz">
      <div id="quiz-question-card" class="container welcome-card shadow-lg text-dark mb-3 d-flex justify-content-center">
        <div class="card-body">
          <h3 class="question-title">Question</h3>
          <p id="question-text"></p>
        </div>
      </div>
      <div class="container d-flex justify-content-center">
        <div id="answer-btns" class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
          
        </div>
      </div>
</section>

JavaScript代码 #

let spQuiz = [
    {
        question: "What planet is closest to the Sun?",
        answers: [
            "../img/venus.png",
            "../img/mercury.png",
            "../img/mars.png",
            "../img/earth.png"
        ],
        correctAnswer: '1'
    },
    {
        question: "Which planet has the highest mountain in our solar system, a volcano named Olympus Mons?",
        answers: [
            "../img/mars.png",
            "../img/jupiter.png",
            "../img/neptune.png",
            "../img/earth.png"
        ],
        correctAnswer: '0'
    },
];

let newQuestion = 0;
function displayQuestion () {
    let question = spQuiz[newQuestion];
    document.getElementById("question-text").innerHTML = question.question;
    let answers = question.answers;
    for (let i = 0; i < answers.length; i++) {
        let answer = answers[i];
        let img = document.createElement("img");
        img.src = answers;
        img.onclick = function() {
            checkAnswer(i);
        };
        document.getElementById("answer-btns").appendChild(img);
    } 
}

displayQuestion();

问题修复方案 #

1. 核心代码错误修正 #

你代码里的关键问题是给图片src赋值时用了整个answers数组，而非当前循环的单个图片路径。

把displayQuestion函数中的这一行：

img.src = answers;

改为：

img.src = answer;

或者直接使用循环索引取值：

img.src = answers[i];

2. 路径合法性检查 #

确认HTML文件所在位置与img文件夹的相对路径是否匹配：

• 如果HTML文件在项目根目录，../img/xxx.png会指向根目录的上一级，此时应改为./img/xxx.png或img/xxx.png
• 可以在浏览器开发者工具的「网络」面板中查看图片的请求地址，对比实际文件路径是否一致

3. 优化建议（避免后续问题） #

每次加载新题目时，先清空answer-btns容器，防止旧选项堆积：

function displayQuestion () {
    let question = spQuiz[newQuestion];
    document.getElementById("question-text").innerHTML = question.question;
    // 先清空容器
    document.getElementById("answer-btns").innerHTML = "";
    let answers = question.answers;
    for (let i = 0; i < answers.length; i++) {
        let answer = answers[i];
        let img = document.createElement("img");
        img.src = answer;
        img.onclick = function() {
            checkAnswer(i);
        };
        document.getElementById("answer-btns").appendChild(img);
    } 
}

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