如何阻止WordPress网页中定期更新的同名图片被浏览器缓存

1. 动态生成时间戳查询参数（推荐） #

你之前使用的是固定的查询后缀，浏览器会将带相同后缀的图片链接识别为同一个资源，依旧会触发缓存。你可以在WordPress模板中动态生成随时间变化的查询参数，匹配图片2分钟的更新频率：

<img class="weather-cam-box alignleft" src="/cameraimages/webcam.jpg?<?php echo floor(time()/120); ?>" alt="" width="100%" height="764" />

floor(time()/120) 会每2分钟生成一个相同的数字，既不会频繁请求重复资源，又能保证每次图片更新后自动拉取最新版本。如果你是在WordPress内容编辑器中插入图片，无法直接嵌入PHP代码，直接使用第三种JS方案即可。

2. 配置图片本身的缓存规则 #

你之前只设置了页面的不缓存规则，浏览器对静态图片资源的缓存是独立控制的，不受页面缓存规则影响。
如果你的服务器是Apache环境，可以直接在站点根目录的.htaccess文件中添加如下规则，指定该图片的缓存有效期为2分钟：

<IfModule mod_headers.c>
<Files "webcam.jpg">
Header set Cache-Control "max-age=120, public, must-revalidate"
</Files>
</IfModule>

如果是Nginx环境，可以在站点配置文件中添加如下规则：

location ~* /cameraimages/webcam.jpg$ {
    add_header Cache-Control "max-age=120, public, must-revalidate";
}

3. 前端JS自动刷新（可选） #

如果希望用户停留在页面时也能自动更新最新图片，可以在页面底部添加如下JS代码，每2分钟自动刷新一次图片：

setInterval(function() {
    const camImg = document.querySelector('.weather-cam-box');
    if (camImg) {
        camImg.src = '/cameraimages/webcam.jpg?' + Date.now();
    }
}, 120000); // 120000毫秒 = 2分钟

内容的提问来源于stack exchange，提问作者Asanka