本地文件中image.src == "file.png"不返回true的原因及图片切换问题排查

这个问题我之前也踩过坑！核心原因很简单：image.src返回的是浏览器解析后的完整绝对路径，而不是你在HTML里写的相对路径或文件名，所以直接拿它和"a.png"这种字符串做比较，永远不会相等。

为什么会这样？ #

• 浏览器的路径解析机制：当你在HTML里写<img src="a.png">，浏览器会自动把这个相对路径转换成完整的绝对URL——如果是本地文件环境（file://协议），就会变成类似file:///D:/Projects/your-folder/a.png这样的长路径；如果是服务器环境，就是https://your-domain.com/a.png。image.src拿到的就是这个最终的完整路径，不是你写的短文件名。
• 本地环境的特殊性：用file://打开HTML时，浏览器同样会严格解析路径，不会保留原始的相对路径字符串，所以你用console.log(image.src)看到的是完整路径，和"file.png"完全不匹配。

解决方法有这几种，按需选就行： #

1. 用getAttribute('src')获取原始路径
   这个方法会返回你在HTML里最初写的路径（如果之后没通过JS修改过src属性的话），所以可以直接和"a.png"比较：

   const image = document.getElementById('your-image-id');
   if (image.getAttribute('src') === 'a.png') {
     image.src = 'b.png';
   } else {
     image.src = 'a.png';
   }
   

   注意：如果之后用JS修改过image.src，getAttribute('src')会返回修改后的路径，这点要留意。

2. 提取文件名来比较（最稳妥）
   不管路径是绝对还是相对，我们只需要拿到最后一段的文件名来判断：

   const image = document.getElementById('your-image-id');
   const fileName = image.src.split('/').pop(); // 拿到最后一段文件名
   if (fileName === 'a.png') {
     image.src = 'b.png';
   } else {
     image.src = 'a.png';
   }
   

   这个方法不受路径变化影响，不管是本地还是服务器环境都能用。

3. 用URL对象处理路径（更严谨）
   对于复杂路径或者Windows系统的\分隔符，用URL对象解析会更可靠：

   const image = document.getElementById('your-image-id');
   const imageUrl = new URL(image.src);
   // 检查路径是否以目标文件名结尾
   if (imageUrl.pathname.endsWith('a.png')) {
     image.src = 'b.png';
   } else {
     image.src = 'a.png';
   }
   

   URL.pathname会自动处理不同系统的路径分隔符，避免因为Windows的\导致split失败的问题。

完整示例代码 #

<img id="toggleImg" src="a.png" onclick="switchImage()">

<script>
function switchImage() {
  const img = document.getElementById('toggleImg');
  const fileName = img.src.split('/').pop();
  img.src = fileName === 'a.png' ? 'b.png' : 'a.png';
}
</script>

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