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();
    }
  }

CodePudding user response：

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".

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

name in id does not match. The functions written below seem irrelevant.