Question

我已经在网站上做了一些调查，每次我提出这个问题的解决方案时，其中一个要求是要有一个命名约定和每个图像的列表从目录中提取（例如：image1.jpg，image2.jpg等。）所有文件名都不同，有数千个可供选择（因此将每个文件列为数组中的随机机会不起作用）。

我通常使用CMS服务，并且我在记事本中从头开始编写此网页，以提高我的编码技能......而且我不知道从哪里开始。我对HTML和CSS很不错，但j Query和JavaScript不是我的朋友哈哈。

感谢您的帮助！（即使它只是指向我找不到的教程或解决方案!!!）

Answer 1

所有文件名是image1 image2 image3等吗？然后你可以尝试生成一个随机数，创建一个新的img元素，让它的源指向image + randomnumber.jpg并将其附加到DOM

Answer 2

您在这里遇到的主要问题之一是关于内容如何传递的思考，在一个独立的静态网站中，您无法访问文件系统。这意味着如果我们想要查询浏览器上下文之外的东西，我们是不允许的，显然无法访问目录，我们无法生成可以加载的文件名列表。

如果您想知道为什么我们无法直接访问文件系统，因为大多数现代浏览器所使用的沙箱都是JavaScript，否则人们可能会从前端语言攻击您的本机目录。您的问题很有意思，因为electron以复杂的esk方式删除了这个沙盒，这是必要的，因为它用于构建具有铬的桌面应用程序。

现在最明显的解决方案是使用某种形式的后端语言并创建一个可以直接访问其周围本机目录的Web服务器。 Node，PhP，GoLang和许多其他populatr后端语言可以解析文件目录，然后将它们插入前端代码中，这是最常用的方法。

目前另一种流行的方法是创建API，这只是一个花哨的Web服务器，具有可查询的端点，然后针对我们的Web服务器执行代码并提供这些项的列表。然后，您可以获取项目，然后使用javascript打印出来。

php中的引用目录方法： http://php.net/manual/en/ref.dir.php

列出nodejs中目录的内容： https://code-maven.com/list-content-of-directory-with-nodejs

真正开始用最简单的方法来了解更多内容的最佳位置是在节点或php中启动后端语言，php更简单。

https://www.w3schools.com/php/

Answer 3

首先，您需要从服务器端获取文件列表。然后你可以使用如下代码：

  var imageList = //your image list as an array of urls;
  var imageNumber = Math.random() * imageList.length; //gives you a random number in the range of imageList's size
  var imageToLoad = new Image();
  imageToLoad.addEventListener("load", function(){
      console.log( "image is loading" );
      $('#my-container').append(this); //in this case this will return image dom
  });
  imageToLoad.src = imageList[imageNumber];

这会将图片添加到ID为＃my-container＆＃39;的容器中。它只是一个例子，你可以做任何你想要的事情＆＃39;这个＆＃39;

Answer 4

所以经过社区的大力帮助和指导，我找到了答案！为了更详细地阐明我的过程，这是我为实现预期结果所做的工作：

将页面创建为.php文件而不是.html文件（在我的情况下，index.php）。如果使用记事本创建文件，请确保将文件扩展名更改为.php，将编码更改为UTF-8，并将文件类型另存为“所有文件”。据我了解，PHP可以随机选择文件，但不能将此信息传递给静态HTML页面。
将此代码块放入图片应显示的网页中。目前，它被设置为引用根目录（aka mysite.com/images/）中名为“images”的文件夹。这可以通过在$ imagesDir之后修改撇号之间的文本来更改。如果它在php代码块之外，页面上的所有其他html标记都将正常工作。

代码块：

<?php
   $imagesDir = 'images/';
   $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
   $randomImage = $images[array_rand($images)];
   echo "<img src='$randomImage'>";
?>

感谢@bardizba的代码！虽然可能有较少资源密集的方式来编写它，但我的情况有点不同，因为目录中的文件名不符合命名约定，并且混合了文件类型（jpg，gif等）

再次感谢帮助我的每个人！

在没有列出的文件名数组的页面加载中从目录加载随机图像

4 个答案: