如何实现点击按钮切换图片？已尝试函数但未生效

核心问题 #

1. 路径格式错误：JS里设置的新路径丢失了所有路径分隔符，变成C:UsersjbrirDocumentsBowgartWebsite2imagesBowgart_open.jpeg，浏览器无法识别该路径；同时直接使用本地绝对路径C:\...会被浏览器安全机制限制，无法正常加载本地文件。
2. 无触发元素：仅定义了imgOpen函数，但没有按钮或可点击元素绑定调用该函数，函数根本没有执行机会。
3. 路径转义问题：JS字符串中的反斜杠需转义为\\，更推荐用正斜杠/（跨平台兼容性更好）。

修复方案 #

• 改用相对路径：假设HTML文件在BowgartWebsite2根目录，图片存于images文件夹，直接写images/xxx即可。
• 添加触发按钮：新增<button>元素，通过onclick事件绑定imgOpen函数。
• 修正路径写法：统一使用正斜杠作为路径分隔符。

修正后的完整代码 #

<img
   class="bowgart"
   id="bowgart"
   src="images/bowgart.png"
   alt="Bowgart"
/>
<button onclick="imgOpen()">切换图片</button>
<script>
   function imgOpen() {
      document.getElementById("bowgart").src = "images/Bowgart_open.jpeg";
   }
</script>

额外注意事项 #

• 确保图片文件名和大小写完全匹配（部分系统区分大小写，文件名不一致会导致加载失败）。
• 若HTML文件不在项目根目录，需调整相对路径层级，比如HTML在html文件夹内，路径需写../images/bowgart.png。

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