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

Question

I've done some looking around on the site and every time I pull up a solution to this problem, one of the requirements is to have a naming convention and a list of every image to pull from the directory (example: image1.jpg, image2.jpg, etc.) All of the file names are different and there are thousands of them to pick from (so listing each one as a random opportunity in an array is not going to work).

I typically use CMS services and I'm writing this webpage from scratch in Notepad in an attempt to better my coding skills... and I'm not sure where to begin. I'm decent with HTML and CSS, but j Query and JavaScript are not my friends haha.

Thank you for any help! (Even if it's just pointing me to a tutorial or a solution I could not find!!!)

Answer 1

Are all file names image1 image2 image3 etc? Then you could try to generate a random number, create a new img element and have it's source pointing to image+randomnumber.jpg and append it to the DOM

Answer 2

One of the main problems your facing here is about your thinking when it comes to how content is delivered, in a standalone static website you do not have access to the file system. This means that if we want to query things outside of the browsers context we are not allowed, obviously without being able to access directories we can not generate a list of file names which can be loaded.

If your wondering why we can't access the file system directly from say the JavaScript it's because of the sandbox that most modern browsers live in, otherwise people could attack your native directories from the front end languages. Your question is interesting as electron removes this sandboxing in a sophisticated esk manner, which is necessary as it's used for building desktop apps with chromium.

These days the most obvious solution would be to use some form of back end language and to create a web server that has direct access to the native directories around it. Node, PhP, GoLang and many other populatr backend languages can parse a directory of files and then interpolate those into the frontend code which is the most common method.

The other popular method at the moment is to create API's which is just a fancy web server with a queryable end point that then executes code against our web server and provides back a list of such items. You could then for instance take the items and then print those out using javascript .

Reference directories method in php: http://php.net/manual/en/ref.dir.php

List contents of directory in nodejs: https://code-maven.com/list-content-of-directory-with-nodejs

The best place to really start with the easiest route to understand more would be to start a backend language in either node or php, with php being the simpler of the two.

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

Answer 3

First you need to get your file list from server side. then you can use a code like following:

  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];

this will add image to a container with id 'my-container' its just an example you can do anything you want using 'this'

Answer 4

So after much help and guidance from the community, I have figured out the answer! To clarify my process in extreme detail, here is what I did to achieve the desired outcome:

1. Create the page as a .php file instead of a .html file (in my case, index.php). If you are using notepad to create the file, make sure you change the file extension to .php, the encoding to UTF-8, and save file type as "All Files". As I understand it, PHP can pick the file at random but cannot pass this info to a static HTML page.
2. Place this block of code into the webpage where the image should show. Currently, it is set up to reference a folder named, "images" out of the root directory (aka mysite.com/images/). This can be changed by modifying the text between the apostrophes after $imagesDir. All other html markup on the page will work correctly if it is outside of the php code block.

Code Block:

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

Thank you @bardizba for the code! Although there may be less resource intensive ways to write this, my situation was a bit different because the file names in the directory did not follow a naming convention and there was a mix of file types (jpg, gif, etc.)

Thanks again to everyone that helped me out!