HTML页面使用getElementById切换本地图片失败问题求助

我正在编写一个HTML页面，实现点击按钮切换图片的功能。使用document.getElementById('image').src切换图片时，本地图片点击按钮后无法显示，但直接用<img>标签能正常加载该本地图片；使用谷歌图片链接时按钮功能正常。相关代码如下：

<!IDOCTYPE HTML>
<html>
<body>
<h2> This page shows changing emotions using various buttons </h2>

<img id = "image" src = "path\angry.jpg" style = "width:100px">

<button onclick = 'document.getElementById("image").src = "path\envy.jpg"'>Envy</button>
<button onclick = 'document.getElementById("image").src = "path\angry.jpg"'>Angry</button>
<button onclick = 'document.getElementById("image").src = "path\sad.jpg"'>Sad</button>
<button onclick = 'document.getElementById("image").src = "path\embarassed.jpg"'>Embarassed</button>
<button onclick = 'document.getElementById("image").src = "path\happy.jpg"'>Happy</button>
<button onclick = 'document.getElementById("image").src = "path\anxiety.jpg"'>Anxiety</button>

</body>
</html>

• 修复路径转义问题：JavaScript字符串中，反斜杠\是转义字符，比如"path\envy.jpg"里的\e会被浏览器解析为特殊字符，导致路径失效。解决方法有两种：
  • 将反斜杠替换为双反斜杠\\，写成"path\\envy.jpg"；
  • 改用web标准的正斜杠/作为路径分隔符（推荐），写成"path/envy.jpg"。
• 修正DOCTYPE声明：代码中的<!IDOCTYPE HTML>是拼写错误，应改为<!DOCTYPE html>，规范的声明能避免浏览器进入怪异模式引发的异常。
• 统一路径格式：所有图片路径保持一致的分隔符，避免混合使用斜杠导致的解析问题。

修正后的代码示例 #

<!DOCTYPE html>
<html>
<body>
<h2>This page shows changing emotions using various buttons</h2>

<img id="image" src="path/angry.jpg" style="width:100px">

<button onclick='document.getElementById("image").src = "path/envy.jpg"'>Envy</button>
<button onclick='document.getElementById("image").src = "path/angry.jpg"'>Angry</button>
<button onclick='document.getElementById("image").src = "path/sad.jpg"'>Sad</button>
<button onclick='document.getElementById("image").src = "path/embarassed.jpg"'>Embarassed</button>
<button onclick='document.getElementById("image").src = "path/happy.jpg"'>Happy</button>
<button onclick='document.getElementById("image").src = "path/anxiety.jpg"'>Anxiety</button>

</body>
</html>

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