JavaScript切换图片仅显示alt问题求助

问题概述 #

我在class为box的div内放置了class为imagen的img元素，点击对应按钮切换img的src属性时，图片无法加载，仅显示alt文本。尝试过setAttribute方法，结果相同；用div设置背景图的方式效果不佳，需要有效解决方案。

问题根源 #

核心问题是图片路径不匹配：

• HTML中初始图片路径为 ./styles/imgs/1.jpg，说明图片实际存储在项目根目录下的styles/imgs/文件夹中
• 但JS代码里切换图片时使用的是./imgs/2.jpg这类路径，浏览器会从根目录下的imgs/文件夹查找图片，而该目录不存在，导致图片加载404错误

修复步骤 #

1. 修正图片路径 #

将JS中所有切换图片的路径，改为和HTML初始路径一致的./styles/imgs/xxx格式：

// 修正后的setColorRojo函数示例
function setColorRojo() {
  if(btnRojo.value == "rojo") {
    box.style.background = "#FF0000";
    imagen.src = "./styles/imgs/2.jpg"; // 修正路径
    titulo.style.color = "red";
  }
}

以此类推，把所有imagen.src = "./imgs/xxx"替换为imagen.src = "./styles/imgs/xxx"。

2. （可选）优化代码冗余 #

原代码每个按钮对应一个函数，重复代码过多，可以优化为统一处理函数，减少冗余：

// 替换所有单独的setColor函数
function setColorAndImage(color, imgPath, titleColor) {
  box.style.background = color;
  imagen.src = `./styles/imgs/${imgPath}`;
  titulo.style.color = titleColor;
}

// HTML按钮修改为传递参数（比如btnrojo的onclick改为）
onclick="setColorAndImage('#FF0000', '2.jpg', 'red')"

验证方法 #

修改完成后，打开浏览器开发者工具（F12），切换到"网络"标签，点击按钮查看图片请求状态：

• 如果状态码为200，说明路径正确，图片可以正常加载
• 如果仍为404，检查图片文件名、后缀名是否和代码一致，以及文件实际存放位置是否匹配

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