如何克隆img src属性中的url参数值？

Question

我试图从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中先添加参数值还好。

对此，我们将给予任何帮助。 提前非常感谢您。

Answer 1

您应该这样做：

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

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

Answer 2

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

使用image元素上的.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 

Answer 3

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