JavaScript测验应用开发：如何从数组渲染图片至HTML页面

嘿，我来帮你搞定这个图片展示的问题！你已经完成了问题和选项的渲染逻辑，只需要在printQuestion函数里添加几行代码，就能轻松把数组里的图片路径同步到HTML页面中。

关键修改步骤： #

1. 修正变量名错误：你代码里数组名为quiz，但totalQuestion用了questions.length，这会导致报错，先把它改成quiz.length。
2. 添加图片渲染逻辑：通过jQuery选择器找到HTML中的图片元素，然后设置它的src属性为当前测验项的image值，同时别忘了设置alt属性提升可访问性。

修改后的完整script.js代码： #

let index = 0;
let attempt = 0;
// 修正数组名，从questions改为quiz
let totalQuestion = quiz.length;

function printQuestion(i) {
  $(".questionBox").text(quiz[i].question);
  $(".optionBox span").eq(0).text(quiz[i].option[0]);
  $(".optionBox span").eq(1).text(quiz[i].option[1]);
  $(".optionBox span").eq(2).text(quiz[i].option[2]);
  $(".optionBox span").eq(3).text(quiz[i].option[3]);
  
  // 新增：渲染图片的代码
  const currentImagePath = quiz[i].image;
  // 找到img元素，更新src和alt属性
  $("#iqid img")
    .attr("src", currentImagePath)
    .attr("alt", `Quiz image for: ${quiz[i].question}`);
}

额外注意事项： #

• 路径正确性：第二个测验项的图片路径是../img/6.jpg，请确认这个相对路径是相对于你的HTML文件位置的，比如如果HTML在根目录，而图片在img文件夹下，那../img/6.jpg会指向根目录的上一级，这可能不对，要根据实际文件结构调整路径。
• 可访问性：设置alt属性很重要，它能在图片加载失败时显示提示，也能帮助屏幕阅读器用户理解图片内容。

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