不会将数组中的img添加到div背景中

Question

I want to add a background image to a div from an array. It works when I just set the background like this:

div.style.background = "url(path/to/img.jpg) no-repeat"

But if I take it from an array such as this:

const array=[
    '"url(path/to/img.jpg) no repeat"', 
    '"url(path/to/img2.jpg) no repeat"', 
    '"url(path/to/img3.jpg) no repeat"'
];
div.style.background = array[1];

it does not work.

const grid = document.getElementById("grid");
const photos = ['"url(img/DSC_0387.JPG) no-repeat"', '"url(img/DSC_0389.JPG) no-repeat"', '"url(img/DSC_0392.JPG) no-repeat"', '"url(img/DSC_0393.JPG) no-repeat"', '"url(img/DSC_0399.JPG) no-repeat"'];

function add() {
  let div = document.createElement('div');
  div.style.background = photos[2];
  div.style.borderRadius = "10px";
  div.style.height = "350px";
  div.style.backgroundSize = "contain";
  grid.appendChild(div);
};
add();

Answer 1

Remove the double set of quotes in the photos array.

ie '"url(img/DSC_0387.JPG) no-repeat"' becomes 'url(img/DSC_0387.JPG) no-repeat'

 const grid = document.getElementById("grid"); const photos = ['url(img/DSC_0387.JPG) no-repeat', 'url(img/DSC_0389.JPG) no-repeat','url(img/DSC_0392.JPG) no-repeat','url(img/DSC_0393.JPG) no-repeat','url(img/DSC_0399.JPG) no-repeat']; function add(){ let div = document.createElement('div'); console.log(photos[2]); div.style.background = photos[2]; div.style.borderRadius = "10px"; div.style.height = "350px"; div.style.backgroundSize = "contain"; grid.appendChild(div); }; add(); 

 <div id="grid"></div> 

Answer 2

welcome to StackOverflow.

Your photos array has double-quotes wrapping the value, you should remove it.

The quotes will be handled automatically, you just need to pass a normal string to div.style.background with the desired value. Currently you're passing a string that starts with " , thus being not a valid value for this attribute, resulting in this not being rendered on DOM.

Answer 3

In photos Array change the values of the array as below. Remove the single quotes for the values of the array.

const photos = [
  "url(img/DSC_0387.JPG) no-repeat",
  "url(img/DSC_0389.JPG) no-repeat",
  "url(img/DSC_0392.JPG) no-repeat",
  "url(img/DSC_0393.JPG) no-repeat",
  "url(img/DSC_0399.JPG) no-repeat"
];