Question

我是初学者。

我遇到了一个小问题，我无法将图像添加到我的 div 块中。

这是我的 HTML 代码

<span class = 'memepic'>
<img src ="https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU">
</span>

我写的js代码就是这样的

//it is my <span> id
const img = document.getElementsByClassName('memepic') 

//it is my divblock id
const memebox = document.querySelector('#meme')


for(i of img){
    i.addEventListener("click", function(e) {
        console.log(e)
        memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';

      });
}

错误显示我的控制台是

e.path[0].currentSrc:1 GET file:///C:/Users/kevin/Desktop/bootcamp/officialclass/meme%20generator/e.path[0].currentSrc net::ERR_FILE_NOT_FOUND

我的目的是当我点击那张图片时，该图片将显示在我的屏幕中央的 divblock 上。

我检查了 path[0].currentSrc 是否正确。如果我将 'e.path[0].currentSrc' 替换为 'e.path[0].currentSrc' 中的内容，它将显示图片。

喜欢这个

memebox.style.backgroundImage = 'url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU");

Answer 1

Javascript 不解析字符串内的变量，因此您要求将背景 URL 字面上设置为“e.path[0].currentSrc”。

取而代之的是：

memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';

这样做：

memebox.style.backgroundImage = 'url("' + e.path[0].currentSrc + '")';

Answer 2

嘿，你能在 for 循环中试试这个代码吗：

`url(${e.srcElement.currentSrc})`

DOM 背景-图片添加

2 个答案: