Question

我正在尝试使用JavaScript做图像灯箱。这是我的HTML代码

<div id="lightbox2">

</div>
<div id="lightbox">
    <button onclick="lgBox('www.w3schools.com/howto/img_fjords_wide.jpg')"><img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt=""></button>

</div>

我发送当前点击的链接作为lgBox功能中的参数。这是我的Js功能。

    function lgBox(url){
    var u = url;
    alert(u);
    document.getElementById("lightbox2").innerHTML="<img src='u' />";
    document.getElementById("lightbox").style.display="none";

}

它正确显示我通过的警告框中的网址。但为什么此链接无效"<img src='u' />";

提前致谢。

Answer 1

你需要连接使用+这样的字符串变量

'<img src="' + u + '" />'

在您的代码中：

function lgBox(url){
    var u = url;
    alert(u);
    document.getElementById("lightbox2").innerHTML='<img src="' + u + '" />';
    document.getElementById("lightbox").style.display="none";

}

Answer 2

您正在使用的方法是错误的，因为它将字符串u放在src标记中。您希望将此u替换为该变量的实际值。 见下文：

function lgBox(url){
var u = url;
alert(u);
//this is wrong and will throw an error in console (404)
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}

而不是上面你应该做这样的事情

function lgBox(url){
var u = url;
alert(u);
//ES6 template literals or if this is not supported then you can use 
//concatenation also.
document.getElementById("lightbox2").innerHTML=`<img src=${u} />`;
document.getElementById("lightbox").style.display="none";
}

Answer 3

您只需在html标记中传递u字符串，您必须实际连接这样的网址：

document.getElementById("lightbox2").innerHTML = '<img src="' + u + '" />';

图像未使用JavaScript在div中显示

3 个答案: