Drupal 8站点替换图片后前端浏览器未更新问题求助

问题根因 #

该问题由浏览器端静态资源强缓存导致：只要图片的访问URL没有发生变化，即使服务端的文件内容或文件名已经更新，浏览器也会直接调用本地存储的旧缓存文件，不会向服务端发起新的请求。无痕模式下不会复用本地持久缓存，因此可以正常加载新资源。

修复方案 #

1. 开启Drupal核心静态资源版本号功能（优先推荐） #

Drupal 8自带资源版本号生成能力，无需修改业务代码即可解决绝大多数场景的缓存问题：

• 登陆Drupal后台，进入「配置」-「开发」-「性能」页面
• 在「带宽优化」分区，勾选为静态资源添加版本号选项（部分版本显示为「为CSS和JS文件添加版本号」，实际对通过官方API生成的图片资源同样生效）
• 保存配置后清空全站Drupal缓存即可
  开启后所有通过Drupal标准API生成的图片URL会自动带上类似?v=123456的版本后缀，文件更新后后缀自动变更，会直接触发浏览器重新请求新资源。

2. 自定义模块图片输出兼容 #

如果自定义模块没有调用Drupal标准API生成图片URL，直接硬编码了文件路径，需要调整代码逻辑：

• 公共文件/图片字段资源的URL生成统一调用file_create_url()函数
• 图片样式资源的URL生成统一调用ImageStyle::buildUrl()方法
• 模块/主题目录下的静态图片，通过file_create_url(drupal_get_path('module', '你的模块名') . '/images/目标图片.jpg')方式生成带版本号的URL

3. 调整Web服务器缓存规则（可选优化） #

如果你的Nginx/Apache之前给图片设置了过长的强缓存周期，可以调整为更合理的配置，避免极端场景下缓存长期不更新：

Nginx配置示例：

location ~* \.(jpg|jpeg|png|gif|webp|ico)$ {
    expires 7d;
    add_header Cache-Control "public, must-revalidate";
}

Apache配置示例：

<FilesMatch "\.(jpg|jpeg|png|gif|webp|ico)$">
    ExpiresActive On
    ExpiresDefault "access plus 7 days"
    Header set Cache-Control "public, must-revalidate"
</FilesMatch>

4. 临时紧急修复方案 #

如果需要立刻让所有用户看到更新后的图片，可以手动给目标图片的URL添加自定义查询后缀，比如将/sites/default/files/product.jpg改为/sites/default/files/product.jpg?2024052001，手动修改后缀即可强制所有浏览器加载新资源。

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