将 URL 参数附加到 img src 的末尾

Question

我想使用 JS 或 JQuery 获取特定的 URL 参数和 append 到我嵌入到我的登录页面上的自定义代码块中的 IMG SRC 标签。 示例如下：

示例 URL - https://www.example.com/page?utm_source=test&email=test@test.com

所需的 IMG SRC - <img src="https://www.example.com/example.jpg?email=test@test.com">

我梳理了几篇介绍类似解决方案的文章（通常是图像 src URL 本身），但我无法让它工作 - 超出了我的理解范围。

谢谢你。

Answer 1

考虑到这是我们的 URL: https://www.example.com/page?utm_source=test&email=test@test.com";

const url = window.location.href;
    const email = url.split("email=")[1];
    const imgSrc = "https://www.example.com/example.jpg?email=" + email;
    const imgTag = "<img src='" + imgSrc + "'>";

Answer 2

在丹麦人的回答的帮助下：

 $(document).ready(function () { function setToImg(url,param,imageId,imageUrl){ const urlParam = url.split(''+param+'=')[1]; const result = decodeURI(urlParam).trim(); const imgSrc = imageUrl+'?'+param+'='+result; $('#'+imageId).attr('src',imgSrc); } setToImg('https://www.example.com/page?utm_source=test&email=test@test.com','email','myImage','image-name.jpeg'); //helper for run function: //setToImg('your_url_whith_params','param','your_image_id','your_image_url_without_params'); //for top page url: //setToImg(window.location.href,'email','myImage','image-name.jpeg'); console.log($('div').html()); //for test - remove this line. });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div><img id="myImage"></div>

更新：获取图像过去的 src和 append新的 src ：

 $(document).ready(function () { function setToImg(url,param,imageId){ const urlParam = url.split(''+param+'=')[1]; const result = decodeURI(urlParam).trim(); const imageUrl = $('#'+imageId).attr('src'); const imgSrc = imageUrl+'?'+param+'='+result; $('#'+imageId).attr('src',imgSrc); } setToImg('https://www.example.com/page?utm_source=test&email=test@test.com','email','myImage'); //helper for run function: //setToImg('your_url_whith_params','param','your_image_id'); //for top page url: //setToImg(window.location.href,'param','your_image_id'); console.log($('div').html()); //for test - remove this line. });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div><img id="myImage" src="https://example.com/img/image.jpeg"></div>