如何为网站链接和图片配置不同的base href适配移动端？

这问题挺常见的——<base>标签会统一接管所有相对URL的解析规则，所以直接设base href="mobile/"会把图片也导向mobile目录，刚好和你的需求相反。这里有几个实用的方案：

方案1：给图片使用根相对路径（最推荐） #

如果能直接控制图片的src属性（包括从数据库读取的文本里的img标签），给所有图片路径加上开头的/就行。比如：

<!-- 原来的相对路径（会被base影响） -->
<img src="images/logo.png">

<!-- 修改后（直接从根目录加载，不受base影响） -->
<img src="/images/logo.png">

这个方法完全不需要JS，是最稳定、性能最好的方案，因为浏览器会直接正确解析路径，没有额外处理成本。

方案2：用JavaScript修正图片路径（适合无法修改原始图片路径的情况） #

如果图片路径是从数据库读取的、没法提前加/，可以在页面加载完成后，用JS批量修正所有img标签的src：

// 等DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 遍历所有img元素
  document.querySelectorAll('img').forEach(img => {
    const rawSrc = img.getAttribute('src');
    // 跳过已经是绝对路径（http开头）或根相对路径（/开头）的图片
    if (!rawSrc.startsWith('http') && !rawSrc.startsWith('/')) {
      // 给路径加上根目录前缀
      img.setAttribute('src', '/' + rawSrc);
    }
  });
});

注意要使用getAttribute('src')而不是直接读img.src——因为后者会返回浏览器解析后的完整URL，而我们需要的是原始的相对路径字符串。

补充：为什么之前的JS方案失效？ #

你之前尝试用JS修改图片src但失效，大概率是因为在<base>标签生效后才去修改，或者没有正确处理路径。比如如果base已经把图片路径解析成mobile/xxx.jpg，再改src可能需要先去掉mobile前缀，但不如直接给路径加上/来的直接。

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