如何在 img src 属性中克隆 url 参数值？答案

【问题标题】：how to clone url parameter value inside img src attribute?如何在 img src 属性中克隆 url 参数值？
【发布时间】：2019-03-23 02:34:47
【问题描述】：

我正在尝试从 url 获取参数值，将其添加到 div 中，然后将该值克隆到 img src 属性中。

我可以在 div 中获取参数值，并将其克隆，但它是这样做的：

<img id="target" src="images/">samplevalue.png</img>

我需要这样做：

<img id="target" src="images/samplevalue.png" />

示例参数：param1=samplevalue.png

代码如下：

html

<div id="block1"></div>
<img id="target" src=""/>

jQuery/Javascript

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1].replace(/\+/g, "&nbsp"));
        }
    }
    return decodeURIComponent(pair[1]);
}

document.getElementById("block1").innerHTML = 
getQueryVariable("param1");

$(document).ready(function() {
    $("img#target").attr("src", "images/").html($("#block1").html());
});

即使直接在 img src 属性中添加参数值也比在 div 中添加 first 好。

对此的任何帮助都非常感谢。非常感谢您。

【问题讨论】：

部分问题是因为您在 img 元素上设置了 html()，这是无效的。不要那样做。
谢谢@RoryMcCrossan。我明白你的信息，我会确保的。

标签： javascript jquery html url-parameters

【解决方案1】：

您必须将函数的返回值添加为属性src 的一部分。

在图像元素上使用.html($("#block1").html())，您试图在实际上无效的图像上设置html：

将函数改为：

$(document).ready(function() {
  var urlPart = getQueryVariable();
  $("img#target").attr("src", "images/" + urlPart);
});

请注意：

既然你已经在使用 jQuery，我建议你尽可能不要混合使用 JavaScript 和 jQuery，比如：

document.getElementById("block1").innerHTML = getQueryVariable("param1");

可以很容易地写出来：

$('#block1').text(getQueryVariable("param1")); //text() is preferred when dealing with text content

【讨论】：

感谢@Mamun 的回答和重要信息。它帮助我更好地理解它，也感谢您的更新。祝你有美好的一天兄弟:)
也感谢@Rory 指出这一点 :) 并祝你有美好的一天 :)
再次感谢@Mamun 更新答案并使代码更高效兄弟:)
@pv619，很高兴这对你有意义:)

【解决方案2】：

$("img#target").attr("src", "images/"+$("#block1").html());

【讨论】：

您可能希望在将 HTML within 设置为 img 标记时对此进行测试，这是无效的。
感谢@evgeni 的回答，祝您有美好的一天:)

【解决方案3】：

你应该这样做：

$(document).ready(function() {
    var param1 = getQueryVariable("param1");
    $("img#target").attr("src", "images/"+param1);
    $("#block1").html(param1);  
});

将您的参数放入一个变量中，然后使用它来更改您的 SRC 属性并将内容放入您的 div 中。

【讨论】：

谢谢兄弟的帮助。它解决了我的问题并度过了愉快的一天:)