Can someone explain this to me:
I have a div which background image is working:
<section class="bottom-banner" id="imagebannerthree" style="background-image:url(https://*****.com.au/wp-content/custom-products/1628/bottom-3.jpg);">
</section>
but when i tried loading background image using javascript there is no image loaded:
document.getElementById('imagebannerthree').style.backgroundImage = checkImage("https://*****.com.au/wp-content/custom-products/1628/bottom-3.jpg");
function checkImage(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status == 200) {
return 'url(' + url + ')';
} else {
document.getElementById('' + parentdiv).remove();
}
}
You need to use quotes while assigning value to style.backgroudImage
document.getElementById('imagebannerthree').style.backgroundImage = "url('https://*****.com.au/wp-content/custom-products/1628/bottom-3.jpg')";
you most probably getting the error "url is not a function".
document.getElementById('imagebanner').style.backgroundImage = "url(https://piranhatc.com.au/wp-content/custom-products/1628/bottom-3.jpg)";
function checkImage(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status == 200) {
return 'url(' + url + ')';
} else {
document.getElementById('' + parentdiv).remove();
}
}.bottom-banner {
object-fit: cover;
width: 200px;
height: 200px;
}<section class="bottom-banner" id="imagebanner">
</section>name in id does not match. The functions written below seem irrelevant.