未使用JavaScript在div中显示图像

我正在尝试使用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>

它在警报框中正确显示了我传递的url。 但是为什么这个链接在这里不起作用

---

提前感谢。

您只需传递html标记中的

u

字符串，就必须实际连接url，如下所示：

---

document.getElementById（“lightbox2”）.innerHTML=''

您只需传递html标记中的

u

字符串，就必须实际连接url，如下所示：

---

document.getElementById（“lightbox2”）.innerHTML=''
您需要用+将变量u转换为字符串，如下所示：

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

“”

在代码中：

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

}

函数lgBox（url）{
var u=url；
警报（u）；
document.getElementById（“lightbox2”）.innerHTML=''；
document.getElementById（“lightbox”）.style.display=“无”；
}
您需要用+将变量u转换为字符串，如下所示：

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

“”

在代码中：

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

}

函数lgBox（url）{
var u=url；
警报（u）；
document.getElementById（“lightbox2”）.innerHTML=''；
document.getElementById（“lightbox”）.style.display=“无”；
}
您使用的方法是错误的，因为它将字符串
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";
}

函数lgBox（url）{
var u=url；
警报（u）；
//这是错误的，将在控制台（404）中引发错误
document.getElementById（“lightbox2”）.innerHTML=“”；
document.getElementById（“lightbox”）.style.display=“无”；
}

你应该这样做，而不是上面提到的

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";
}

函数lgBox（url）{
var u=url；
警报（u）；
//如果不支持ES6模板文本，则可以使用
//连接也可以。
document.getElementById（“lightbox2”）.innerHTML=`；
document.getElementById（“lightbox”）.style.display=“无”；
}
您使用的方法是错误的，因为它将字符串
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";
}

函数lgBox（url）{
var u=url；
警报（u）；
//这是错误的，将在控制台（404）中引发错误
document.getElementById（“lightbox2”）.innerHTML=“”；
document.getElementById（“lightbox”）.style.display=“无”；
}

你应该这样做，而不是上面提到的

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";
}

函数lgBox（url）{
var u=url；
警报（u）；
//如果不支持ES6模板文本，则可以使用
//连接也可以。
document.getElementById（“lightbox2”）.innerHTML=`；
document.getElementById（“lightbox”）.style.display=“无”；
}
嗯，你的
u
只是字符串的一部分。进行字符串插值或字符串浓缩，例如：
innerHTML=“”嗯，你的
u
只是字符串的一部分。进行字符串插值或字符串浓缩，例如：
innerHTML=“”谢谢。给出了很多答案。这是最好的，太好了。以后尽量不要再犯这样的错误：）谢谢。给出了很多答案。这是最好的，太好了。以后不要再犯这样的错误：）