使用變量URL（jQuery）設置div的背景圖像

Question

我創建了一個用戶註冊頁面，我希望用戶能夠輸入圖像URL，然後在預留的div中預覽圖像（它有一個默認圖像已經在一個給定的類中應用）。我的用戶圖像顯示HTML是：

<div id="user-image-preview" class="col-md-4 col-sm-12 user-image-preview"> </div> 
<button id="preview-image">Preview image</button> 

爲id'user圖像預覽」和類‘用戶圖像預覽’的CSS是：

#user-image-preview { 
height: 300px; 
width: 300px; 
border-radius: 50%; 
position: absolute; 
left: 200px; 
top: 150px; 
background-size: cover; 
} 

.user-image-preview { 
background-image: url("https://cdn1.iconfinder.com/data/icons/unique-round-blue/93/user-512.png"); 
background-size: cover; 
} 

這裏是輸入部分

<div class="form-group"> 
    <i class="fa fa-picture-o" aria-hidden="true"></i> 
    <label for="img">Image</label> 
     <input id="user-image-set" type = "text" class ="form-control" placeholder = "Enter image URL" name = "image"> 
</div> 
<button id="submit-login" type ="submit" class="btn btn-primary btn-lg disabled">Signup</button> 

然後我寫了下面jQuery來移除默認圖像（等級=「用戶圖像預覽」），然後添加無論是在輸入字段：

其中用戶輸入圖像URL的形式的

$("#preview-image").on("click", function() { 
var newUserImage = $('#user-image-set').val(); 
    $("#user-image-preview").removeClass("user-image-preview"); 
    $("#user-image-preview").css("background-image", "url('newUserImage')"); 
    console.log(newUserImage) 
}) 

（我添加了console.log只是爲了檢查我是否正確捕獲變量）。

我認爲這是我在函數的URL部分中使用引號的問題，但我無法完全弄清楚引用此變量的正確方法是什麼。

Answer 1

由於newUserImage是一個變量，你不必把它放在引號「」 所以這行

$("#user-image-preview").css("background-image", "url('newUserImage')"); 

改變

$("#user-image-preview").css("background-image", "url(" + newUserImage + ")");