功能更改图像不起作用，为什么

Question

我想创建将网址设置为照片的功能，然后使用该照片更改所选div的背景图像。

function changePhoto(id) {
            var y = document.getElementById("baza_big_photo");
            y.style.display = "block";
            var z = '"' + "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")" + '"';
                y.style.backgroundImage = z;
                console.log(z);
        }

例如，我将tn_baza01（照片名称）作为参数发送，但是图像未显示在我的较大div中：(

我有20个具有不同ID的小div，顶部还有一个大div。 当我单击小图像时，应将较大的div背景图像更改为该图像。

Answer 1

var z的连接正在创建一个字符串，例如"url('./assets/min_images/tn_baza01.jpg')" ，并且前导/后缀引号无效。

将该行更新为此，以删除前导/后缀引号

var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")";

它将创建一个类似url('./assets/min_images/tn_baza01.jpg')的字符串

只要图像路径有效，就可以正常工作。

 function changePhoto(id) { var y = document.getElementById("baza_big_photo"); y.style.display = "block"; var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")"; y.style.backgroundImage = z; } changePhoto('tn_baza01'); 

 <div id="baza_big_photo"></div> 

Answer 2

您不应该将url(..)包装在"

因此将其更改为

var z = "url('./assets/min_images/" + id + ".jpg')";

应该解决问题