JavaScript图片切换代码疑问：代码中是单图还是双图？替换后无切换效果？

1. 代码里是一张还是两张图片？ #

代码里只插入了一张图片元素，HTML中仅存在一个<img id="myImage">标签。所谓的“开灯/关灯”效果，是通过JavaScript修改这个唯一img元素的src属性，让它加载不同的图片资源（pic_bulbon.gif和pic_bulboff.gif），本质上是同一个图片元素在切换显示的图片文件。

2. 替换图片后无法切换的常见原因 #

• 图片路径错误：新替换的图片文件要和HTML文件处于正确的路径位置。如果图片在子文件夹，需写对相对路径（比如./imgs/light_on.jpg），浏览器找不到资源就无法显示切换效果。
• 文件名/后缀不匹配：确保代码里的src值和实际图片的文件名、后缀完全一致，包括大小写（Linux/macOS系统区分文件名大小写），比如实际是light_on.png，代码里写成lighton.png就会出错。
• 浏览器缓存干扰：浏览器可能缓存了旧的图片资源，按Ctrl+F5强制刷新页面清除缓存后再试。
• 代码拼写错误：检查img标签的id是否和按钮onclick事件里getElementById('myImage')的id一致，如果修改了img的id但没同步改按钮代码，JS找不到元素就无法修改src。

附原始代码 #

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

内容的提问来源于stack exchange，提问作者Anh Khoa Nguyễn Trần