如何从 JavaScript 变量数组生成随机图像到我的 HTML 文档中？答案

【问题标题】：How do I generate a random image from a JavaScript array of variables into my HTML document?如何从 JavaScript 变量数组生成随机图像到我的 HTML 文档中？
【发布时间】：2017-09-10 18:27:16
【问题描述】：

这是我目前在我的 HTML 和 JavaScript 页面中的内容，尽管我不想在 JavaScript 文件中使用 URL，因为我的项目文件夹中有图像。但是当我打开html时，没有图像弹出。我也不想要背景图片。

var images = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"];

var randomName = images[Math.floor(Math.random() * images.length)];

document.getElementById("randomImage").style.backgroundImage = "url('http://angelinawong.com/" + randomName + "')";

<!DOCTYPE html>
<html>
<head><title>47</title></head>
<body>
    <div id="randomImage"/>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
</body>
</html>

【问题讨论】：

我没有看到 javascript 部分有什么问题，只要确保图像 url 正确（这些都指向任何地方）并且元素具有一些最小宽度和高度。
除了那些 URL 上不存在的图像之外，它似乎工作正常
@adeneo 你不需要randomName + 1，因为图像名称以1 开头？但是您对 /img 网址不起作用是正确的。我也试过了。
@82Tuskers - 不，图像的名称不相关，只是数组中的索引
我将所有图像放在项目文件夹中，而不是在 URL 上。我想摆脱“url（...”功能，但我不能

标签： javascript jquery html image generator

【解决方案1】：

尝试将脚本标签放在body标签之后，这可能是加载HTML和JS的顺序有问题。

<!DOCTYPE html>
<html>
<head><title>47</title></head>
<body>
 <div id="randomImage"/>
</body>    
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</html>

【讨论】：

谢谢丹！我认为这就是问题所在。现在我无法弄清楚如何生成这些图像，并且由于我不想使用 URL，如何将“url”替换为项目文件夹的路径？
@Angelina 您可以使用来自您的index.html 所在位置的相对网址。