-2

What I have: A .html on a computer in my local network at work, without a web server. The index.html is therefore accessed through file:// and not http://.

What I want: A .html that shows the most recent image in a folder and automatically refreshes. I have a program taking screenshots every X seconds and saving them as "NameHHMMSS.jpg".

Is this possible without Web Server, PHP installations and so on? Thank you in advance!

Cardinal System
  • 2,749
  • 3
  • 21
  • 42
Andreas
  • 1
  • 1
    if `Name` in the file name is actually fixed you might be able to use the onerror event on Image object or a a hidden image element when attempting to load an image, generate or count up a current HHMMSS, which could attempt to continuously load new images every second, if its not errored then set it into the img element which is shown – Lawrence Cherone Dec 15 '22 at 00:09
  • Thank you for the quick response! The name part is fixed, and your theory sounds plausible. I'm a beginner at this. Can you write me an example code? – Andreas Dec 15 '22 at 00:17
  • You need a server side coding lang like php, js, asp etc.. you cant auto update images with html. – DLK Dec 15 '22 at 00:34

2 Answers2

0

You can create a function to dynamically generate the filename and load the image. Then you can use setTimeout to call the function from within itself at a desired interval.

Here is a quick test (Notice the image name changes every 5 seconds):

function generateImagePath() {
  // Replace this logic with your code to generate the path for your image
  let basePath = "../images/";

  let date = new Date();

  var randomColor = Math.floor(Math.random() * 16777215).toString(16);

  let imageName = "Name" + date.getHours() + date.getMinutes() + date.getSeconds();

  // This is just to get a sample image (this will be the path of your image)
  let imageUrl = "https://via.placeholder.com/200/" + randomColor + "/fff?text=" + imageName + ".jpg";


  return imageUrl;
}

// Function that loads/changes an image every 5 seconds
function loadImage() {

  let imageUrl = generateImagePath();

  document.getElementById("imageDiv").src = imageUrl;

  setTimeout(loadImage, 5000); // Change duration here
}

// Assign the function to be called when the page has loaded
window.addEventListener('DOMContentLoaded', (event) => {
  loadImage();
});
<body>
  <img id="imageDiv" src="#" />
</body>
Vini
  • 8,299
  • 11
  • 37
  • 49
0

If it is just an .html file, you can put the code below inside the <head> tag for the page to refresh every 5 seconds.

<meta http-equiv="refresh" content="5; URL=http://index.html">

Just edit the code above based on your requirement.

kapitan
  • 2,008
  • 3
  • 20
  • 26