JavaScript点击图片切换src失效：无法来回切换图片的问题排查

问题背景 #

想实现点击图片切换明暗模式，但第一次切换后无法切回。HTML结构如下：

<div class="mode-change">
   <img id="modeImg" class="" src="media/light.png" alt="Mode">
</div>

最初写的JS代码始终走不到else分支，后来打印modeImg.src发现，JS获取到的是绝对路径（比如http://localhost/study/media/light.png），和HTML里的相对路径media/light.png完全不一致。

问题根源 #

element.src返回的是浏览器解析后的绝对URL，不是HTML中编写的相对路径字符串，所以直接用modeImg.src === "media/light.png"做判断永远不成立，导致一直执行else分支。

可行解决方法 #

方法1：获取原始相对路径对比 #

用getAttribute('src')获取HTML里原本的相对路径，直接做字符串匹配：

let modeImg = document.getElementById("modeImg");

modeImg.addEventListener("click", changePic);

function changePic() {
  const currentSrc = modeImg.getAttribute('src');
  if (currentSrc === "media/light.png") {
    modeImg.setAttribute('src', "media/dark.png");
  } else {
    modeImg.setAttribute('src', "media/light.png");
  }
}

方法2：检查路径是否包含目标文件名 #

通过判断绝对路径中是否包含图片文件名来切换，不用关心完整路径：

let modeImg = document.getElementById("modeImg");

modeImg.addEventListener("click", changePic);

function changePic() {
  if (modeImg.src.includes("light.png")) {
    modeImg.src = "media/dark.png";
  } else {
    modeImg.src = "media/light.png";
  }
}

方法3：用自定义属性记录状态（推荐） #

这种方式不依赖路径字符串，通过data-*属性记录当前模式，逻辑更清晰可靠：

<!-- 先给img添加data-mode属性 -->
<div class="mode-change">
   <img id="modeImg" class="" src="media/light.png" alt="Mode" data-mode="light">
</div>

let modeImg = document.getElementById("modeImg");

modeImg.addEventListener("click", changePic);

function changePic() {
  const currentMode = modeImg.dataset.mode;
  if (currentMode === "light") {
    modeImg.src = "media/dark.png";
    modeImg.dataset.mode = "dark";
  } else {
    modeImg.src = "media/light.png";
    modeImg.dataset.mode = "light";
  }
}

内容的提问来源于stack exchange，提问作者Iyo The Plug