JavaScript无法显示随机图片求助：基于平均值展示图片失败

老哥，你遇到的问题很典型——直接把图片路径字符串塞给innerHTML，浏览器只会把它当普通文本渲染，根本不会自动变成图片标签。要是之前试了.src没搞定，大概率是你操作的元素不对或者没找对姿势，下面给你详细说怎么修：

核心问题拆解 #

你当前的代码是把happy[rand]（也就是图片路径字符串）直接赋值给bod元素的innerHTML，比如路径是/images/rick.gif，浏览器就只会在页面上显示这段文字，而不会渲染成图片。

两种可行修复方案 #

方案1：用innerHTML插入完整的img标签 #

直接把路径包裹在<img>标签里，让浏览器识别这是一个图片元素：

var happy = ["/images/rick.gif", "/images/troll.gif", "/images/wild.gif","/images/pervkid.gif"],
    rand = Math.floor(Math.random() * happy.length);

console.log(avg);
if (avg > 2) {
  // 用img标签包裹路径，顺便加个alt属性提升可访问性
  document.getElementById("bod").innerHTML = `<img src="${happy[rand]}" alt="Random fun image">`;
}

方案2：直接操作img元素的src属性（更推荐） #

如果页面里已经有现成的<img>标签（比如给它加个idhappyImage），直接修改它的src属性是更高效的做法：

var happy = ["/images/rick.gif", "/images/troll.gif", "/images/wild.gif","/images/pervkid.gif"],
    rand = Math.floor(Math.random() * happy.length);

console.log(avg);
if (avg > 2) {
  const img = document.getElementById("happyImage");
  // 先检查元素是否存在，避免控制台报错
  if (img) {
    img.src = happy[rand];
    img.alt = "Random fun image";
  }
}

要是页面里没有现成的img标签，也可以动态创建一个再插入到bod容器里：

var happy = ["/images/rick.gif", "/images/troll.gif", "/images/wild.gif","/images/pervkid.gif"],
    rand = Math.floor(Math.random() * happy.length);

console.log(avg);
if (avg > 2) {
  // 创建新的img元素
  const newImg = document.createElement("img");
  newImg.src = happy[rand];
  newImg.alt = "Random fun image";
  
  // 清空容器原有内容，插入新图片
  const container = document.getElementById("bod");
  container.innerHTML = "";
  container.appendChild(newImg);
}

为啥之前用.src没生效？ #

你之前试.src没解决，大概率是这两个原因之一：

• 你操作的bod元素是div、p这类容器标签，它们根本没有src属性，设置了也白搭；
• 代码执行的时候DOM还没加载完成，导致getElementById拿不到元素——这种情况可以把代码放在DOMContentLoaded事件里，或者直接放到页面底部。

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