JavaScript代码中图片无法显示的问题求助

核心问题 #

你的图片加载失败主要有3个原因：

• 路径错误：图片放在imageshown文件夹里，但你JS里设置的src只是文件名，没有带上文件夹前缀，浏览器找不到文件
• 初始src无效：HTML里img标签的src=imageshown是个无效值，浏览器一开始就会请求错误的路径
• DOM加载顺序问题：如果你的JS代码放在img标签之前执行，document.getElementById('img')会找不到元素，导致无法修改src

修正方案 #

1. 给图片路径加上文件夹前缀，比如imageshown/Koenigsegg.jpg，不同车型对应不同图片的话，把每个分支里的路径改对
2. 把HTML里img的初始src设为空或者默认图片路径，避免无效请求
3. 确保JS在DOM加载完成后执行，比如把JS代码放在</body>标签之前，或者用DOM加载事件包裹

修正后的完整代码 #

HTML

<img id='img' src="" alt="Car Image">

JS

/* this is an event */
//alert('Im Annoying');
// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  var username = prompt("Enter Your Name");
  var car = ["Bmw", "Mercedes", "Koenigsegg"];
  var randomNumber = Math.floor(Math.random() * car.length);
  var randcar = car[randomNumber]
  var imageshown; // 先声明变量，避免重复声明

  if (username === "Nilesh") {
    document.write("<h1>Hello " + username + " you won a " + randcar + "!</h1>");
    // 对应不同车型设置正确的图片路径
    if (randcar === "Bmw") {
      imageshown = "imageshown/Bmw.jpg"
    } else if (randcar === "Mercedes") {
      imageshown = "imageshown/Mercedes.jpg"
    } else {
      imageshown = "imageshown/Koenigsegg.jpg"
    }
  } else if (username === "Chris") {
    document.write("<h2>Hey " + username + " You Won A " + randcar + "!</h2>");
    if (randcar === "Bmw") {
      imageshown = "imageshown/Bmw.jpg"
    } else if (randcar === "Mercedes") {
      imageshown = "imageshown/Mercedes.jpg"
    } else {
      imageshown = "imageshown/Koenigsegg.jpg"
    }
  } else {
    document.write("<h3>" + username + " Go Cry On Your Mom's Lap 🤣!</h3>");
    imageshown = "imageshown/Koenigsegg.jpg"
  }

  // 检查元素是否存在再设置src
  var imgElement = document.getElementById('img');
  if (imgElement) {
    imgElement.src = imageshown;
  }
});

CSS（无需修改）

/* Basic CSS comment */

body {
  background: beige;
  color: white;
  width: 960px;
  margin: 0 auto;
  font-size: 30px;
}

h1 {
  font-size: 80px;
  color: #333;
}

h2 {
  font-size: 80px;
  color: #a61250;
}

h3 {
  font-size: 80px;
  color: #7d1db5;
}

额外提醒 #

• 确认图片文件名和代码里的完全一致（大小写敏感，比如bmw.jpg和Bmw.jpg是不同的）
• 打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面看图片请求的状态，如果是404就是路径还不对，检查文件夹结构和文件名

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