1

I use the following html5 code to display a html page with an image(1.JPG). Its working fine. The image will be randomly overwritten with an another newer image in a certain interval in the same path provided. So, I use meta tag to refresh the page, so that whenever any newer image is overwritten in the path, the page will be refreshed with the updated image automatically. But, it looks like refreshing the page for every 5 secs fine, but its NOT displaying the newer image which has overwritten in the same path, it always shows with the initial image i kept. Could someone help me to fix this issue?

<!DOCTYPE HTML>
<html>
  <head>   
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <meta http-equiv="refresh" content="5">
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="100"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = 'italic 30pt Calibri';
      context.fillText('Screen sharing', 10, 50);
    </script>
    <p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
  </body>
</html>
Stella
  • 1,657
  • 3
  • 34
  • 83

1 Answers1

2

Meta tag Refresh URL, please try

<meta http-equiv="refresh" content="5; ,URL=http://domain.com">

OR You can do it from javascript 

<script type="text/javascript"> 
    setInterval(function(){
       window.location.reload();
    },5000); 
</script>

And please use SERVER url to load image instead of file url 

<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>

Change To 

<p><img src = "http://domain.com/Downloads/1.JPG" /> </p>
Girish
  • 11,254
  • 3
  • 32
  • 48
  • I haven't registered yet this Web page with any server. I am just testing from the system path. This is my html page path, file:///Users/Martin/Desktop/Prabakar/WHH/Co-browsing/ScreenSharing.html – Stella Jan 12 '14 at 06:24
  • Why you are using abosolute path ?? use relative path – Ashish Jan 12 '14 at 06:25
  • Hi Girish, Thank you. I have another doubt. I saved this random selected image from a servlet which runs on Eclipse Tomcat server. I store this image in system path and this html page uses to show this image. I am thinking of NOT storing this image from the servlet to any system path, directly it should be read by my html page. Is this possible? – Stella Jan 12 '14 at 06:32
  • You should save images on server webroot/images folder and you can load from relative path, file path will not work when you runs web page another machine – Girish Jan 12 '14 at 06:35
  • Thanks. I know that. i'm just testing now. My next requirement is, I should not store this image anywhere in my server/machine, this image(which comes from a mobile app) should be pushed from servlet to html page, Is this possible to load image like this in html code (or) Do I need write applet for this? How to do this? – Stella Jan 12 '14 at 06:39
  • Applet will not good there, Please read for more detail (http://stackoverflow.com/questions/9835061/image-src-for-calling-a-servlet) – Girish Jan 12 '14 at 06:50
  • Ok great, that link says I can call servlet and get the image directly from this html? – Stella Jan 12 '14 at 06:54
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45042/discussion-between-girish-jangid-and-user817729) – Girish Jan 12 '14 at 06:57