网页自动硬刷新无效，如何显示最新同名替换图片？

你遇到的核心问题是浏览器缓存了同名的avatar.png——即使页面刷新，浏览器仍优先加载本地缓存的旧图，只有强制刷新（Shift+F5）才会重新请求服务器的新图。以下是几种可靠的解决方案：

方案1：给图片URL添加动态参数（最直接有效） #

每次加载图片时，在URL后追加动态生成的参数（比如时间戳），让浏览器认为这是全新资源，不会使用缓存。这种方式无需刷新整个页面，体验更流畅：

<html>
<head>
    <script>
        window.onload = function() {
            const img = document.querySelector('img');
            // 页面加载时加载最新图片
            updateImage(img);
            // 每30秒更新一次图片
            setInterval(() => updateImage(img), 30000);
        }

        function updateImage(imgElement) {
            // 用当前时间戳作为参数，确保URL唯一
            imgElement.src = `avatar.png?t=${new Date().getTime()}`;
        }
    </script>
</head>
<body>
    <img height="1500">
</body>
</html>

方案2：优化页面刷新逻辑 #

如果坚持要刷新整个页面，需要确保请求完全跳过缓存。修改缓存策略的同时，给页面URL也添加动态参数：

<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script>
        function autoRefresh() {
            // 去掉旧参数，添加新时间戳参数
            const baseUrl = window.location.href.split('?')[0];
            window.location.href = `${baseUrl}?t=${new Date().getTime()}`;
        }
        setInterval(autoRefresh, 30000);
    </script>
</head>
<body>
    <img src="avatar.png" height="1500">
</body>
</html>

方案3：服务器端设置缓存策略（一劳永逸） #

如果能控制服务器配置，直接给avatar.png设置强制不缓存的响应头，浏览器每次都会主动请求新图：

Apache（.htaccess配置） #

<Files "avatar.png">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</Files>

Nginx配置 #

location = /avatar.png {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

为什么之前的方法无效？ #

你之前用的location.reload(true)理论上是强制刷新，但部分浏览器会忽略这个参数；同时仅靠meta标签的缓存策略，可能无法完全覆盖浏览器对图片资源的缓存逻辑。而添加动态参数是最可靠的方式——URL变化后，浏览器一定会重新请求资源。

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