如何使用JS或JQuery将指定URL参数追加到img src末尾

下面分两种方案实现，你可以根据自己的需求选择：

原生JavaScript方案 #

步骤1：写一个获取URL指定参数的工具函数 #

这个函数能从当前页面URL里提取你需要的参数值：

function getUrlParam(paramName) {
  // 解析URL的查询参数部分
  const urlParams = new URLSearchParams(window.location.search);
  // 返回指定参数的值，不存在则返回null
  return urlParams.get(paramName);
}

步骤2：修改img的src属性 #

假设你的img标签有一个id（比如target-img），或者可以通过其他选择器定位，代码如下：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标img元素
  const imgElement = document.getElementById('target-img');
  // 获取URL里的email参数值
  const emailParam = getUrlParam('email');

  if (imgElement && emailParam) {
    // 处理src已有参数的情况：如果原src包含?就加&，否则加?
    const separator = imgElement.src.includes('?') ? '&' : '?';
    // 拼接新的src并赋值
    imgElement.src = `${imgElement.src}${separator}email=${emailParam}`;
  }
});

JQuery方案 #

如果你习惯用JQuery，逻辑和原生一致，只是选择元素的方式不同：

步骤1：复用参数获取函数 #

function getUrlParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

步骤2：用JQuery修改img的src #

$(document).ready(function() {
  const emailParam = getUrlParam('email');
  const $img = $('#target-img'); // 这里换成你的img选择器，比如类名或src特征

  if ($img.length && emailParam) {
    const separator = $img.attr('src').includes('?') ? '&' : '?';
    $img.attr('src', `${$img.attr('src')}${separator}email=${emailParam}`);
  }
});

注意事项 #

• 一定要确保代码在DOM加载完成后执行，否则可能找不到目标img元素
• 如果你的img没有id，可以用特征选择器定位，比如原生的document.querySelector('img[src*="example.jpg"]')或者JQuery的$('img[src*="example.jpg"]')
• 如果URL里没有目标参数（比如email），代码会自动跳过修改，避免无效操作

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