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＆＃39;用户图像预览＆＃39;的CSS和班级＆＃39;用户图像预览＆＃39;是：

#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来删除默认图像（class =＆＃34; user-image-preview＆＃34;）然后添加输入字段中的任何内容：

$("#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 + ")");

Answer 2

这个解决方案对我有用：

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

您需要添加''

使用变量URL（jQuery）

2 个答案: