如何在JS加载的Quiz中为每个选项动态加载对应图片？

嘿，我看你这个三权分立测验的项目架构挺合理的，把不同权力分支的题目拆分到单独文件里确实便于维护。现在要给每个选项动态加载对应的图片，没办法静态写在HTML里对吧？我给你梳理下具体的实现步骤：

第一步：更新题目数据结构 #

首先得给每个选项补充图片路径的信息，把原来纯文本的选项改成包含text（选项文本）和imageUrl（图片路径）的对象。比如修改questionExecutivo.js里的题目：

const questionsExecutivo = [
  {
    question: "Qual órgão é chefe do Poder Executivo?",
    options: [
      { 
        text: "Presidente da República", 
        imageUrl: "./images/presidente.png" // 替换成你的实际图片路径
      },
      { 
        text: "Congresso Nacional", 
        imageUrl: "./images/congresso.png" 
      },
      { 
        text: "Supremo Tribunal Federal", 
        imageUrl: "./images/stf.png" 
      }
    ],
    answer: 0
  },
  // 其他题目同理更新
];

注意：确保图片路径正确，比如图片放在项目根目录的images文件夹下，相对路径要和文件结构匹配；如果是在线图片，直接填完整URL即可。

第二步：修改quiz-script.js的渲染逻辑 #

接下来要调整渲染选项的代码，在创建选项元素时同时生成<img>标签，并把图片和文本组合起来。假设你原来的渲染函数是showQuestion，修改后的代码大概是这样：

function showQuestion(question) {
  // 渲染题目文本（这部分和原来一样）
  const questionElement = document.getElementById('question');
  questionElement.innerText = question.question;

  // 清空选项容器
  const optionsContainer = document.getElementById('options');
  optionsContainer.innerHTML = '';

  // 循环渲染每个选项
  question.options.forEach((option, index) => {
    // 创建一个选项容器，用来包裹图片和文本
    const optionWrapper = document.createElement('div');
    optionWrapper.classList.add('option-wrapper');

    // 创建图片元素
    const optionImage = document.createElement('img');
    optionImage.src = option.imageUrl;
    optionImage.alt = `Imagem da opção: ${option.text}`;
    optionImage.classList.add('option-image'); // 方便加样式

    // 创建选项文本按钮（保留原来的交互逻辑）
    const optionTextBtn = document.createElement('button');
    optionTextBtn.innerText = option.text;
    optionTextBtn.classList.add('option-text');
    optionTextBtn.addEventListener('click', () => selectOption(index)); // 绑定选择事件

    // 把图片和按钮加到容器里
    optionWrapper.appendChild(optionImage);
    optionWrapper.appendChild(optionTextBtn);

    // 把选项容器加到页面中
    optionsContainer.appendChild(optionWrapper);
  });
}

第三步：添加CSS优化排版 #

为了让图片和文本排版更美观，给新创建的元素加一些样式：

.option-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: background-color 0.2s;
  cursor: pointer;
}

.option-wrapper:hover {
  background-color: #f5f5f5;
}

.option-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
}

.option-text {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  text-align: left;
  flex: 1;
  cursor: pointer;
}

最后验证测试 #

做完上面的修改后，启动项目测试一下：

• 确认图片能正常加载，没有404错误
• 选项的点击交互逻辑和原来一致
• 排版符合预期

这样就能实现每个选项动态加载对应的图片啦！

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