如何将数组中的URL变量传入getElementById.style.backgroundImage设置背景图

你的问题出在字符串解析上：代码里的"url(arr[3])"是完整字符串，JS不会把里面的arr[3]识别成变量，而是直接把它当作URL的一部分，浏览器自然找不到对应的资源。

修复方法有两种：

• 使用ES6模板字符串：用反引号包裹内容，变量用${}嵌入，这样JS会自动解析变量值

  let arr = [1,2,3,'https://reurl.cc/RX3bkD'];
  document.getElementById("test").style.backgroundImage = `url(${arr[3]})`;
  

• 字符串拼接：把变量和固定字符串部分拼接起来，也能得到正确的URL格式

  let arr = [1,2,3,'https://reurl.cc/RX3bkD'];
  document.getElementById("test").style.backgroundImage = "url(" + arr[3] + ")";
  

另外注意：如果div没有设置宽高，背景图片可能无法显示，建议给#test添加基础样式：

#test {
  width: 300px;
  height: 300px;
  background-size: cover; /* 让图片适配div大小 */
}

内容的提问来源于stack exchange，提问作者jackson