按钮点击后图片无法显示及404错误问题求助

我正在开发一个简易应用，包含4个按钮，点击按钮应显示对应花卉图片。但点击第一个按钮后无任何反应，且弹出如下404错误：

lowerPics%C3%B075__30056__32169.1663778062.1280.1280.webp:1 GET http://127.0.0.1:5500/Chapter%201/lowerPics%C3%B075__30056__32169.1663778062.1280.1280.webp 404 (Not Found)

相关代码如下：

JavaScript代码 #

let dendelionSrc = "\\flowerPics\\36075__30056__32169.1663778062.1280.1280.webp";
let rose = "flowerPics\\single-red-rose.jpg";
let tulip = "flowerPics\\tulip-types-for-spring-garden-1315804-hero-5 c10c927e00c459eb24c702be447e50d.jpg ";
let mayflower = "flowerPics\\MayflowerTrailingArbutus.webp";

CSS代码 #

img {
  display: block;
}

button {
  margin-top: 10px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flower Pictures</title>
</head>

<body>
  <div>
    <img id='picture' width="250" height="250" src="#">

    <button id='dendelion' class="btn" onclick="document.getElementById('picture').src = dendelionSrc">Dendelion</button>

    <button id="rose">Rose</button>

    <button id="tulip">Tulip</button>

    <button id="mayflower">Mayflower</button>

  </div>
</body>

</html>

解决方法 #

核心问题分析 #

错误里的路径被解析成了lowerPics，但你代码里写的是flowerPics，根源是路径分隔符使用错误：

• 在浏览器URL中，必须用正斜杠/作为路径分隔符
• JavaScript字符串里的反斜杠\是转义字符，\\flowerPics\\会被解析成\flowerPics\，这种格式在浏览器里会被错误转码，导致路径混乱

具体修复步骤 #

1. 替换路径分隔符：把所有路径里的反斜杠\改成正斜杠/
2. 清理无效空格：移除tulip变量末尾的空格，避免路径包含无效字符
3. 完善按钮事件：给其他未绑定点击事件的按钮补上逻辑（可选，用于完善功能）

修复后的代码示例 #

修复后的JavaScript

let dendelionSrc = "/flowerPics/36075__30056__32169.1663778062.1280.1280.webp";
let rose = "/flowerPics/single-red-rose.jpg";
let tulip = "/flowerPics/tulip-types-for-spring-garden-1315804-hero-5 c10c927e00c459eb24c702be447e50d.jpg";
let mayflower = "/flowerPics/MayflowerTrailingArbutus.webp";

// 给剩余按钮绑定点击事件
document.getElementById('rose').addEventListener('click', function() {
  document.getElementById('picture').src = rose;
});
document.getElementById('tulip').addEventListener('click', function() {
  document.getElementById('picture').src = tulip;
});
document.getElementById('mayflower').addEventListener('click', function() {
  document.getElementById('picture').src = mayflower;
});

修复后的HTML（优化版）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flower Pictures</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引入CSS文件 -->
</head>

<body>
  <div>
    <img id='picture' width="250" height="250" src="#">

    <button id='dendelion' class="btn" onclick="document.getElementById('picture').src = dendelionSrc">Dandelion</button> <!-- 顺便修正单词拼写错误 -->

    <button id="rose">Rose</button>

    <button id="tulip">Tulip</button>

    <button id="mayflower">Mayflower</button>

  </div>
  <script src="script.js"></script> <!-- 将JS放在body末尾确保DOM加载完成 -->
</body>

</html>

额外检查项 #

• 确认flowerPics文件夹确实存在于项目对应路径下，且所有图片文件名和代码中的完全一致
• 若在Linux/macOS环境下开发，注意文件名区分大小写，确保代码里的文件名和实际文件大小写匹配

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