.style.backgroundImage="url('my_image.png') does not work when image file name served as variable

Question

Here is a function which works perfectly when I serve the background file name as bracketed string.(ie "my _image.png")

function  mychoice_photo_show() {
  document.getElementById('mychoice_photo').style.backgroundImage="url('my _image.png')"
}

HERE IS THE PROBLEM:-

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url(img)"
};

When I call it like so : mychoice_photo_show("my_image.png")

It does not call the requested image.

Should I look for any syntax like missing single quotes, or double quotes somewhere, or it just not supposed to work like that ?

One way is to concatenate the variable into the string you have like: `.style.backgroundImage="url(" + img + ")"` — j08691, Apr 08 '21 at 13:22
Does this answer your question? [How to interpolate variables in strings in JavaScript, without concatenation?](https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation) — Heretic Monkey, Apr 08 '21 at 13:22
THANK YOU!. concatenating the phrase did the job! i have just tried that and succeeded after 4 hours of messing arround . — oded, Apr 08 '21 at 13:32

BTSM · Answer 1 · 2021-04-08T13:45:07.030

Try like this.

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')"
};

Or ES6

function mychoice_photo_show(img) {
      document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')`
    };

For example

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')"
};

#mychoice_photo{
  width:100px;
  height:100px;
}

<div id="mychoice_photo"></div>
<button onclick="mychoice_photo_show('https://www.w3schools.com/howto/img_nature_wide.jpg')">Show image</button>

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')`
};

#mychoice_photo{
  width:100px;
  height:100px;
}

<div id="mychoice_photo"></div>
<button onclick="mychoice_photo_show('https://www.w3schools.com/howto/img_nature_wide.jpg')">Show image</button>

score 1 · Answer 2 · answered Apr 08 '21 at 13:26

I would create a utility function that takes an element and image URL and set the background-image by using a template literal. I would then create a convenience call that finds your element and just passes that information down to the utility function.

Note: I converted the name of your function to lowerCamelCase instead of lower_snake_case because JavaScript recommended this.

function showPhoto(element, imageUrl) {
  element.style.backgroundImage = `url("${imageUrl}")`;
}

function mychoicePhotoShow(imageUrl) {
  showPhoto(document.getElementById('mychoice_photo'), imageUrl);
}

Template literals have been available for quite some time now:

Browser	Minimum Version
Chrome	41
Edge	12
Firefox	34
Safari	9

score 1 · Answer 3 · answered Apr 08 '21 at 13:27

try this if es6 is available:

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')`
};

or this if es6 is not available:

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')"
};

.style.backgroundImage="url('my_image.png') does not work when image file name served as variable

3 Answers3