如何用jQuery批量修改图片src路径？适配admin子目录访问需求

当然可以！这个场景太常见了——后台页面放在子目录里后，相对路径的基准变了，导致原本正常的图片加载失败。用jQuery能快速批量调整所有uploads目录下的图片路径，具体实现方法如下：

核心思路 #

找到所有src属性包含uploads/的图片元素，给它们的路径前面加上../，同时做个判断避免重复添加（防止页面刷新或重复执行代码时，路径变成../../uploads/这种错误格式）。

具体代码 #

// 确保DOM完全加载后再执行操作
$(document).ready(function() {
  // 匹配所有src中包含"uploads/"的img标签
  $('img[src*="uploads/"]').each(function() {
    const $img = $(this);
    const currentSrc = $img.attr('src');
    
    // 检查是否已经添加过上级目录标识，避免重复操作
    if (!currentSrc.startsWith('../uploads/')) {
      $img.attr('src', `../${currentSrc}`);
    }
  });
});

代码说明 #

• $(document).ready()：保证页面所有DOM元素加载完成后再执行路径修改，避免出现找不到图片元素的情况。
• $('img[src*="uploads/"]')：使用属性选择器精准定位所有引用uploads目录下图片的元素。
• each()：遍历每一个匹配到的图片，逐个处理路径。
• 条件判断!currentSrc.startsWith('../uploads/')：防止重复添加../，比如页面刷新或代码重复执行时，不会把路径改成../../uploads/这种错误格式。

额外注意事项 #

1. 动态加载的图片：如果你的页面是通过AJAX动态加载图片内容，那这段代码需要放在动态内容加载完成后再执行，或者使用MutationObserver监听DOM变化，自动处理新添加的图片。
2. jQuery依赖：确保你的admin页面已经引入了jQuery库，否则这段代码无法运行。
3. 绝对路径不影响：如果有些图片用的是绝对路径（比如https://yourdomain.com/uploads/image1.jpg），这段代码不会对它们做修改，因为startsWith('../uploads/')的判断不会匹配绝对路径，不用担心误改。

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