refresh image when source changed

Question

I have an html page contain Image, the image source is locally,

<img src="c:\bla\bla.png" />

so, the "bla.png" file is changed, I overwrite the image,

How can I refresh the image in the img control without refreshing the whole page?

Use javascript and a setInterval to change the src attribute to something like c:\bla\bla.png?cnt=1 and increment cnt. — Jerinaw, Aug 16 '17 at 14:12
Not necessary..image automatically changed when src was changing — prasanth, Aug 16 '17 at 14:14

score 3 · Answer 1 · answered Aug 16 '17 at 14:15

3

Try

let url = 'c:\bla\bla.png', 
    count = 0;
setInterval(function() {
    document.getElementById('myimg').src = url + '?cnt=' + count++;
}, 1000);

Change the html a little.

<img id="myimg" src="c:\bla\bla.png" />

answered Aug 16 '17 at 14:15

Jerinaw

score 2 · Accepted Answer · answered Aug 16 '17 at 14:16

2

Everytime that the image changes you execute this code:

yourImage.src = "http://localhost/image.jpg?" + new Date().getTime();

If you can't catch this event, just instantiate an interval

setInterval(function(){ yourImage.src = "http://localhost/image.jpg?" + new Date().getTime(); }, 1);

answered Aug 16 '17 at 14:16

Marco Salerno

2 Answers2