Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displaying the user's image is as follows:
<div id="user-image-preview" class="col-md-4 col-sm-12 user-image-preview"> </div>
<button id="preview-image">Preview image</button>
The CSS styling for 'id=user-image-preview' and the 'user-image-preview' class is outlined below:
#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;
}
This snippet showcases the input section of the form where users can provide the image URL:
<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>
In order to replace the default image with the contents of the input field, I utilized the following jQuery script:
$("#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)
})
(I included the console.log statement to validate the accuracy of the variable retrieval).
My assumption is that there might be an issue with how quotes are being used within the URL segment of the function, but I have yet to pinpoint the correct method of referencing this variable.