javascript - 背景图像在 JavaScript 中没有改变

Question

以下行在代码中不起作用，

document.getElementById("image").style.backgroundImage =url(previewPic.src); //not working

HTML:

<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">

<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">

<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">

CSS:

/*Name this external file gallery.css*/
body{
        margin: 2%;
        border: 1px solid black;
        background-color: #b3b3b3;
}
#image{
    line-height:650px;
        width: 575px;
    height: 650px;
        border:5px solid black;
        margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}
.preview{
        width:10%;
        margin-left:17%;
    border: 10px solid black;
}
img{
        width:95%;
}

JS:

/*Name this external file gallery.js*/

function upDate(previewPic){
console.log(previewPic.src);
console.log(previewPic.alt);  
document.getElementById("image").style.backgroundColor = "#CCEECC";//worked
document.getElementById("image").innerHTML=previewPic.alt;//worked
document.getElementById("image").style.backgroundImage =url(previewPic.src); //not working

    }

    function unDo(){
     /* In this function you should 
    1) Update the url for the background image of the div with the id = "image" 
    back to the orginal-image.  You can use the css code to see what that original URL was

    2) Change the text  of the div with the id = "image" 
    back to the original text.  You can use the html code to see what that original text was
    */

    }

CodePen .

Answer 1

在如下字符串中连接 previewPic.src:

document.getElementById("bg").style.backgroundImage = 'url('+previewPic.src+')';

previewPic = {
  src: 'https://unsplash.it/200/200?image=55'
}
document.getElementById("bg").style.backgroundImage = 'url('+previewPic.src+')';

div {
  width:200px;
  height:200px;
  background-size:cover
}

<div id="bg"></div>