Image URL not working if set as div background using Javascript

Question

I'm writing a simple app with images URLs that contain special characters. I'm not able to set them as CSS background images from javascript code.

I suspect the culprits are the special characters in the URL, but escaping them with '\' doesn't seem to solve the problem.

All images are loaded correctly from the browser, and they work even when set as background property using the CSS editor in the Chrome Developer Tools.

Example code: [JsFiddle Link]

(function() {

  document.getElementById("bg-btn").addEventListener("click", function() {
    var bg_url = document.getElementById("bg-url").value;
    document.getElementsByClassName("container")[0].style.backgroundImage = "url(" + bg_url + ")";
  });

})();

.container {
  max-width: 300px;
  height: 300px;
  background: #ccc;
  background-size: cover;
}

<div class="container"></div>
URL: <input type="text" id="bg-url">
<button id="bg-btn">Change Background</button>

Working image URL: https://www.spiritdental.com/components/com_easyblog/themes/wireframe/images/placeholder-image.png

Not working image URL: https://img.discogs.com/VF4F5JDIXO8v8A_OLZr4Nh03_so=/fit-in/600x520/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-6029909-1409248351-4058.jpeg.jpg

EDIT:

As many of you suggested adding single quotes in the url('...') expression solve the issue.

But why some URL work even without the single quote? Does the browser assume the argument is a string because it contains safe characters?

You forgot about qoutes in url, try *.backgroundImage = "url('" + bg_url + "')" — Wojciech Parys
– Wojciech Parys, Commented Jul 9, 2018 at 12:14
Yes adding single quotes works, but why some URLs work without them too? The browser assume they are strings as they only contain safe characters? — fbid
– fbid, Commented Jul 9, 2018 at 12:17

Mr. Roshan · Accepted Answer · 2018-07-09 12:07:30Z

2

Try this:-

(function() {

  document.getElementById("bg-btn").addEventListener("click", function() {
    var bg_url = document.getElementById("bg-url").value;
    document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";
  });

})();

.container {
  max-width: 300px;
  height: 300px;
  background: #ccc;
  background-size: cover;
}

<div class="container"></div>
URL: <input type="text" id="bg-url" value="https://img.discogs.com/VF4F5JDIXO8v8A_OLZr4Nh03_so=/fit-in/600x520/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-6029909-1409248351-4058.jpeg.jpg">
<button id="bg-btn">Change Background</button>

answered Jul 9, 2018 at 12:07

Mr. Roshan

1,80517 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emmanuel RICHE · Accepted Answer · 2018-07-09 12:06:29Z

0

Just add single quote: document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";

It works for me.

answered Jul 9, 2018 at 12:06

Emmanuel RICHE

1734 bronze badges

Comments

Pre'P · Accepted Answer · 2018-07-09 12:10:02Z

0

You can try this:

Add a single quote to bg_url.

Something like:

(function() {

  document.getElementById("bg-btn").addEventListener("click", function() {
    var bg_url = document.getElementById("bg-url").value;
    document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";
  });

})();

I hope this will help you! :-)

answered Jul 9, 2018 at 12:10

Pre'P

699 bronze badges

Collectives™ on Stack Overflow

Image URL not working if set as div background using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related