How do I refresh an image in HTML?

Question

I'm working on an html doc that I can use on my Apachee2 server to view 6 webcams on 1 page to monitor our 3D printers at school. I can make a simple page that shows the images and refresh the page to refresh the images, as I'm using images instead of the MJPEG stream to prevent excessive network bandwidth usage. I want these images to refresh every second without reloading the page. I just need a simple solution that will refresh all 6 feeds at the same time without reloading the page. Thanks!

I looked through about 20 different articles for this problem and none of them have been able to work, since I am a beginner.

<body>
    <img src="http://example:8080/?action=snapshot" width="320" height="240">
<img src="https://example:8081/?action=snapshot“ width="320" height="240">
<img src="https://example:8082/?action=snapshot" width="320" height="240">
<img src="https://example:8083/?action=snapshot" width="320" height="240">
<img src="https://example:8084/?action=snapshot" width="320" height="240">
<meta http-equiv="refresh" content="2">

</body>

score 0 · Answer 1 · answered Apr 22 '19 at 23:49

0

I would look into using AJAX, that way you don't have to reload the page. Possible solution here: How to reload an image using ajax

answered Apr 22 '19 at 23:49

Triston Wasik

56
3

That may be a bit beyond my abilities, as I've only really had an intro into HTML and Java, Javascript, but thanks, though! – Sahaj Patel Apr 22 '19 at 23:56
AJAX, is not very complicated. If you are working with javascript then AJAX is not far off at all. Look into: https://www.w3schools.com/xml/ajax_intro.asp – Triston Wasik Apr 23 '19 at 19:23

score 0 · Answer 2 · answered Apr 22 '19 at 23:57

with vanilla javascript:

<html>
<head>
</head>
<body>
    <img src="https://www.w3schools.com/html/pic_trulli.jpg?action=snapshot" width="320" height="240">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg?action=snapshot" width="320" height="240">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg?action=snapshot" width="320" height="240">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg?action=snapshot" width="320" height="240">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg?action=snapshot" width="320" height="240">

    <script>
        setInterval(function(){
            refreshImg();
        }, 2000);
        // 2000 = 2 seconds, change to whatever you like

        function refreshImg(){
            var x = document.querySelectorAll("body > img");
            for (var i = x.length - 1; i >= 0; i--) {
                x[i].src = x[i].src + '&' + new Date().getTime();
                console.log(x[i].src);
            };
        }
    </script>
</body>
</html>

what this is doing is essentially appending the current time in seconds to the images and therefore forcing to grab a noncached version

you are welcome, if you could accept my answer that would be great — Dan, Apr 23 '19 at 00:22

Manic · Answer 3 · 2019-04-23T00:31:58.903

0

The meta tag should be in the <head> section, also in the content parameter you need to put the url after the seconds you need to refresh.

In your code second image in the src parameter there is an erroneous quotation end mark

<head>
  <meta http-equiv="refresh" content="2; url=http://example.com/">
</head>

<body>
  <img src="https://picsum.photos/200">
</body>

edited Apr 23 '19 at 00:31

answered Apr 22 '19 at 23:59

Manic

1
2

but this still refreshes the page - i think OP looking for no refresh option – Dan Apr 23 '19 at 00:00
@Dan i thought that he refer to not refresh by the user, because the code he posted was with the metatag and also the question is taged html not javascript. – Manic Apr 23 '19 at 00:30

score 0 · Answer 4 · answered Apr 23 '19 at 00:01

javascript .. place the src in another attribute and update the src attribute with a time parameter

<body>
    <img data-src="http://example:8080/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8081/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8082/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8083/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8084/?action=snapshot" width="320" height="240">

    <script>
    let refresh = function() {
        let imgs = document.getElementsByTagName( 'img');

        for ( let i = 0; i < imgs.length; i++) {
            let src = imgs.item(0).getAttribute('data-src');
            src += '&t=' + Date.now();
            // looks like https://example:8084/?action=snapshot&t=19999999
            imgs.item(0).setAttribute('src', src);

        };

    }

    window.setInterval( refresh, 1000);

    </script>
</body>

How do I refresh an image in HTML?

4 Answers4