设置img元素src属性后被自动解析为绝对路径的处理方案

给img元素的src赋值相对路径时，浏览器会自动遵循标准URL解析规则，以当前文档的基准URL（即document.baseURI，如果页面配置了<base>标签会自动取对应值）为基础，把传入的相对路径解析为完整绝对路径，过程中会自动处理路径中的..、.、冗余斜杠等片段，最终序列化后的绝对URL就是读取image.src时返回的值，这是所有现代浏览器的标准行为，并非异常。

注意：不要使用字符串后缀匹配、手动拼接路径的方案，这类方案在存在同名文件、路径包含..片段时极易出现判断错误，没有兼容性保障。

• 复用浏览器原生URL解析逻辑做全等匹配
  直接用浏览器原生URL构造函数解析传入的文件名，这个API和浏览器解析img src走的是完全一致的规则，会自动处理路径跳转、相对路径解析，解析后的结果可以直接和image.src返回的绝对路径做全等比对，不会出现匹配错误。
  示例代码：

  // 预解析两个目标图片的标准绝对路径
  const firstImgUrl = new URL('myimage.png', document.baseURI).href;
  const secondImgUrl = new URL('another.png', document.baseURI).href;
  
  // 点击切换时直接做全等判断即可
  image.addEventListener('click', () => {
    image.src = image.src === firstImgUrl ? 'another.png' : 'myimage.png';
  })
  

• 自定义状态维护当前显示图片（推荐，适配后续多图迭代）
  完全绕开src属性的解析逻辑，直接在DOM元素上通过dataset挂载自定义状态，记录当前显示的图片索引，后续不管是双图切换还是多图循环，只需要维护索引和图片列表即可，不需要做任何路径解析和比对，稳定性更高，扩展成本极低。
  示例代码：

  // 初始化图片列表和状态，后续扩展多图只需要往数组里加文件名即可
  const imgList = ['myimage.png', 'another.png', 'third.png'];
  image.dataset.current = 0;
  image.src = imgList[image.dataset.current];
  
  image.addEventListener('click', () => {
    // 循环切换逻辑，双图、多图都适用
    const nextIndex = (Number(image.dataset.current) + 1) % imgList.length;
    image.dataset.current = nextIndex;
    image.src = imgList[nextIndex];
  })
  

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