I have an image called webcam.jpg on the server. This image is replaced by a new image every 2 mins with the same name. I have a WordPress page to display this image.
The issue is this image getting cached in the browser, so it shows the old photo. If I clear the cache, it starts showing the latest image at that time.
I tried the below methods none of them is working for me.
<img class="weather-cam-box alignleft" src="/cameraimages/webcam.jpg?2020" alt="" width="100%" height="764" />
<img class="weather-cam-box alignleft" src="/cameraimages/webcam.jpg?2020" alt="" width="100%" height="764" />
<img class="weather-cam-box alignleft" src="/cameraimages/webcam.jpg?342038402" alt="" width="100%" height="764" />
Also, I tried to target this specific page and not cache the content on that page using the below code it didn't help either.
<?php if ( is_page(22683) ) {?>
<?php nocache_headers(); ?>
<meta http-equiv="cache-control" content="no-cache" />
<?php } ?>
You can try the following steps.
You aren't adding the query string variable. Add variable and unique random number with the timestamp.
<img src="/cameraimages/webcam.jpg?nocache=<?php echo time(); ?>">
Add following meta tag to the head
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">