请求WordPress单页面摄像头图片防浏览器缓存的分步指导

步骤1：给图片URL添加动态版本参数（核心解决方法） #

浏览器靠URL判断是否读取缓存，只要让每次加载的图片URL带唯一动态参数，就能强制浏览器请求新图。

方法A：用PHP动态生成图片URL（适合自定义模板或代码块） #

如果你的页面用自定义模板编辑，直接替换图片代码为：

<?php
// 替换为你的图片服务器路径
$image_local_path = ABSPATH . 'wp-content/uploads/camera/latest.jpg';
// 获取图片最后修改时间戳（图片更新后这个值会变）
$last_update_time = filemtime($image_local_path);
// 生成带版本参数的图片URL
$image_url = site_url('/wp-content/uploads/camera/latest.jpg') . '?v=' . $last_update_time;
?>
<img src="<?php echo esc_url($image_url); ?>" alt="摄像头实时画面" />

方法B：用短代码（适合区块编辑器） #

1. 打开主题的functions.php（推荐用子主题，避免主题更新丢失代码），添加以下短代码：

function camera_live_image() {
    $image_local_path = ABSPATH . 'wp-content/uploads/camera/latest.jpg';
    if (file_exists($image_local_path)) {
        $last_update_time = filemtime($image_local_path);
        $image_url = site_url('/wp-content/uploads/camera/latest.jpg') . '?v=' . $last_update_time;
        return '<img src="' . esc_url($image_url) . '" alt="摄像头实时画面" />';
    } else {
        return '<p>摄像头图片未找到</p>';
    }
}
add_shortcode('camera_live', 'camera_live_image');

2. 在WordPress页面中添加「短代码」区块，输入[camera_live]即可调用动态图片。

步骤2：排除目标页面的WordPress缓存 #

如果你装了缓存插件（如WP Rocket、W3 Total Cache），插件会静态化页面导致动态URL被缓存，需单独排除该页面：

• 打开缓存插件设置，找到「页面排除」/「URL排除」选项，把摄像头页面的URL添加进去，禁止插件缓存该页面。
• 用WordPress自带缓存（如WP Super Cache）的话，同样在排除列表里添加目标页面。

步骤3：给目标页面设置无缓存响应头 #

之前用wp_get_nocache_headers()没生效，大概率是调用时机不对。直接在functions.php中添加以下代码，只针对目标页面生效：

function disable_camera_page_cache() {
    // 替换为你的摄像头页面的slug或ID，比如页面slug是camera-monitor就写camera-monitor
    if (is_page('camera-monitor')) {
        nocache_headers(); // 直接设置标准无缓存头
    }
}
add_action('template_redirect', 'disable_camera_page_cache');

步骤4：服务器端设置图片缓存规则（可选但更保险） #

如果前端方法仍有问题，在服务器层面给目标图片设置15分钟缓存过期：

• Apache环境：在图片所在文件夹（如wp-content/uploads/camera/）新建.htaccess文件，添加：

<Files "latest.jpg">
    Header set Cache-Control "max-age=900, must-revalidate"
</Files>

• Nginx环境：在站点配置文件中添加：

location ~* /wp-content/uploads/camera/latest.jpg {
    expires 15m;
    add_header Cache-Control "must-revalidate";
}

测试注意事项 #

测试时用浏览器隐私窗口，或按Ctrl+F5强制刷新，避免浏览器本地缓存干扰判断。

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