已实现JS/CSS版本化控制，如何强制浏览器重新加载CSS引用的新版图片

以下提供3种不同复杂度的方案，可根据你的实际场景选择：

方案1：自动预处理CSS文件，批量给内部图片加版本戳（最推荐，和现有逻辑兼容） #

无需手动修改每个CSS的图片引用，新增自动处理逻辑即可，完全适配你现有的JS/CSS版本规则：

1. 先扩展.htaccess规则，把图片也纳入版本重写范围：

RewriteEngine on
# 保留原有JS/CSS重写规则
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
# 新增图片类资源的版本重写规则
RewriteRule ^(.*)\.[\d]{10}\.(png|svg|jpg|jpeg|gif|webp)$ $1.$2 [L]

2. 写简单的PHP处理脚本，发布前扫描所有CSS文件，自动匹配替换内部资源路径，示例逻辑：

function process_css($css_path) {
    $root = $_SERVER['DOCUMENT_ROOT'];
    $content = file_get_contents($root . $css_path);
    // 正则匹配所有url内的资源路径
    $content = preg_replace_callback('/url\([\'"]?([^\'")]+)[\'"]?\)/', function($matches) use ($css_path, $root) {
        $img_path = $matches[1];
        // 相对路径转绝对路径，自动处理../等相对标识
        $absolute_img_path = realpath(dirname($root . $css_path) . '/' . $img_path);
        $absolute_img_path = str_replace($root, '', $absolute_img_path);
        // 调用你现有版本函数生成带时间戳的路径
        $versioned_path = auto_version($absolute_img_path);
        return "url('{$versioned_path}')";
    }, $content);
    // 覆盖保存处理后的CSS文件
    file_put_contents($root . $css_path, $content);
}

3. 把该脚本加入发布流程，每次上线前自动执行一次即可，全程无需手动修改CSS内容。

方案2：调整缓存策略，修复ETag不生效问题 #

之前加FileETag不生效大概率是因为图片设置了过长的强缓存时间，浏览器不会发起请求校验ETag，调整配置即可：

1. 先确认Apache的mod_headers模块已开启
2. 修改.htaccess配置，覆盖图片的缓存头：

FileETag MTime Size
<FilesMatch "\.(png|svg|jpg|jpeg|gif|webp)$">
    # 关闭强缓存，要求浏览器每次校验资源是否更新
    Header set Cache-Control "public, no-cache, must-revalidate"
    Header unset Pragma
</FilesMatch>

该方案无需修改任何业务代码，缺点是图片每次加载都要发起一次协商请求，会增加少量服务器开销。

方案3：给图片引用加CSS版本查询参数 #

如果你的图片更新只会跟随CSS发布同步更新，也可以直接给所有图片引用拼接当前CSS的版本号作为查询参数，比如CSS版本为1234567890，就把图片路径改成../mysprite.svg?v=1234567890，不需要额外给图片加重写规则，处理逻辑更简单。

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