如何克隆 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

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

Answer 2

您必须添加函数的返回值作为属性的一部分 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

Answer 3

你应该这样做:

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

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

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

how to clone url parameter value inside img src attribute?

javascript

jquery

html

url-parameters