Question

我正在构建一个程序，该程序从数组中随机选择图像并将其显示在屏幕上。现在，我计划使用数组存储各种图像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>

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

1 个答案: