javascript - 如何引用数组元素作为 .backgroundImage 的目标？

Question

我正在构建一个程序，该程序从数组中随机选择图像并将其显示到屏幕上。现在，我计划使用一个数组来存储各种图像 url，这些图像 url 可以由一个函数引用，该函数随机选择其中一个并使用该值来设置特定元素的背景图像。例如:

var peach = ["url('https://cdn-images-1.medium.com/max/1600/1*Gs9AECdBgWc- 
eG5Tjit-EQ.png')", "https://www.wikihow.com/images/thumb/2/2e/69157- 
3.jpg/aid69157-v4-509px-69157-3.jpg", 
"http://www.snoopcode.com/images/javascript/javascript-arrays-main.jpg"];

 function displayImage() {
   document.getElementById("body").style.backgroundImage = 
peach[1];
}

displayImage();

但这不起作用，因为backgroundImage链接的语法是... =“url('link')”。有没有办法访问数组元素来设置背景图像？

Answer 1

您需要像下面一样连接字符串

var peach = ["https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg", "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg"];

function displayImage(index) {
console.log("displaying----",peach[index])
  document.getElementById("body").style.backgroundImage = 'url(' + peach[index] + ')';

}

displayImage(0);

#body{
height: 149px;
}

<div id="body">
  hello
</div>