Cache Busting in Leaflet marker popups

Question

I'm using a Leaflet map with popups which load updating images. However the images end up cacheing. I thought I'd fix this by adding Date.now() but this only adds the date when the page loads rather than when the pop up opens.

.bindPopup('<img src="image.jpg?'+ Date.now()+'" width="260" height="196" border="0"><br>Location One').addTo(map),

I've tried putting the date now in a separate function...

function foo () {
setInterval(Date.now(), 10000)
}

and calling that function from the pop up:

   .bindPopup('<img src="image.jpg?'+ foo() +'" width="260" height="196" border="0"><br>Location One').addTo(map),

however that just loads: "image.jpg?undefined".

How can I get the cache busting timestamp to update?

(At the moment I'm just using a meta refresh to update the whole page which isn't very elegant and reloads the page just when you've got to the location on the map you want...)

Answer 1

You could bind an arbitrary container / empty content to the popup and instead listen for the popupopen event on the relevant Map, Marker or Path.

scope.on('popupopen', function(ev){
    var src = 'image.jpg?v=' + Date.now();
    ev.popup.setContent('<img src="'+ src +'"/>');
});