javascript - JS 获取背景图片并显示在灯箱中

Question

我有一组带有背景图像的div。我正在尝试获取图像 onclick然后将其显示在灯箱中。当灯箱弹出时，我得到的图像是未定义的。我可以通过控制台正确显示图像url。我知道lbImg.src = galImg.src;不正确，但我不确定如何修复它。

HTML

<div id="lightbox">
    <span class="closeBTN">&times;</span>

    <img class="lbContent" src="">
 </div>

<div class="imgCon">

</div>

CSS

.imgCon
{
 height: 500px;
 width: 15%;
 min-width: 200px;
 background-image: url(../images/01.jpg);
 background-position: center;
 background-size: auto 500px;
 margin-bottom: 66px;
}

JS

var lightbox = document.querySelector('#lightbox')
    img = document.querySelector('.imgCon')
    span = document.querySelector('.closeBTN')
    lbImg = document.querySelector('.lbContent')

img.onclick = (function(){
    lightbox.style.display = "block";
    var galImg = window.getComputedStyle(this, 
    null).getPropertyValue("background-Image");
    lbImg.src = galImg.src;
    //console.log(galImg);
})

span.onclick = (function(){
    lightbox.style.display = "none";

}); 

Answer 1

您在galImg中获取背景图像本身，因此您需要直接设置它(它是一个字符串，没有.src属性)。

但是，我们从 getCompulatedStyle 获取的 galImg 的值是一个字符串，如下所示:"url("file:.../Desktop/1.png")"。我们必须删除 url( 部分以及其中的引号 ("..."):

lbImg.src = galImg.slice(4, -1).replace(/"/g, "");