传统多页网站的浏览器更新缓存的问题

Question

如下，页面中有一张图片，第一次访问该页面时，服务器将该图片的max-age置为10年。
不幸的是，第二天设计师修改了图片，那么问题来了。

由于用户的浏览器在第一次请求该图片的时候，强缓存了这张图片，也就是说在10年内，用户的浏览器并不会和服务器请求更新该图片，而是直接从浏览器缓存中读取，也就导致了用户的浏览器无法看到最新后的图片。

现在需要让浏览器自动更新（用户主动更新不算）

• 维护静态资源的hash(感觉这是单页应用的解决方案，传统多页不适用啊，比如jsp页面)
• 时间戳，在每个静态资源后面加个后台的时间变量，跟hash差不多，应该需要配套的发布系统吧？

大家有什么好的解决方案吗？或者贵公司是怎么做的（传统多页网站）

Answer 1

没有前端构建的时候，人肉版本号。

<img src="/img/banner.jpg" />

<!-- 设计师改了,前端改图片，改代码，发布 -->
<img src="/img/banner.jpg?v=1" />

<!-- 设计师又改了,前端改图片，改代码，发布 -->
<img src="/img/banner.jpg?v=2" />

<!-- 设计师又又改了,前端改图片，改代码，发布 -->
<img src="/img/banner.jpg?v=3" />

这种做法的缺点是，前端替换来图片，很容易就忘记改 img 的 src 引用。

构建工具并不只有 webpack 这种面向 SPA 的，前端发布的时候，gulp 工具处理一下 jsp 替换 js css 和 图片的引用，完全可以实现。

所以，用构建工具自动处理 hash 就是现在的正道啊

不过。。。

<!-- 
设计师又又又改了banner图,前端改图片，发布 
妈蛋，产品／运营 你给我出来，这个图老是改，你干脆做成可配的！

... 
...
...

然后，运营 MM 下次做活动，背景图可配，banner图可配，提示语可配，这也可配，那也可配，尼玛全家都要可配！！！
-->

Answer 2

用hash就是单页应用解决方案？黑人问号脸。

百度首页不是单页应用吧

如果没有好的构建工具，为什么不用 etag 而使用 max-age

Answer 3

这个是微博的图片请求

Answer 4

最好与后台配合改，依赖后台的配置文件

Answer 5

事不过三原则，

第1次改前端改
第2次改前端改
第3次改前端改

第4次改，后端写个功能，让设计师自己上传，前端使用ajax，或者其他方法获取banner地址，输出图片