javascript - img标签，同样的src，但是内容产生了变化，如何让缓存更新？

问题描述

问 题

比如一个用户可以修改自己的头像，
而头像指向一个固定的资源，
这时候用户重新上传了头像，资源路径是不变的，
这种情况如何让浏览器放弃之前的缓存呢？

解决方案

谢谢上面的各位，问题已经解决
思路是另外的
因为网站用的是express，静态资源也是用的express.static方法，所以各位的方法可能会要单独写中间件来实现功能，另外如果是文件名加时间戳的话会让问题变得更复杂，在我的项目中express.static并不能解析带query的url，会出现404，可能与写法有关，但是不管怎样我希望用一个代价不太大的方式来解决这个问题，下面我的解决方法：

/*
express.static(root, [options])接受两个参数，root是serve的路径，可以选择添加options参数
options对象除了可以指定一些静态数值的比如缓存失效时间之外还可以有一个特别的函数参数:setHeader
这个函数接受三个参数：setHeader: function(res, path, stat)
res是express的res对象，可以设置各种http headers
path是当前将会发送的资源的路径
stat是该资源的各种信息：大小，[创建，修改，访问](时间||时间毫秒数)及其他信息
这个函数是同步函数，确保不会造成修改res对象而res已经发送的错误

然后我是使用的Last-Modified(最后修改时间)属性来搞定缓存失效判断的，这个符合我的需求
具有相似功能的有Etag,Expire等HTTP-Header,借助这些可以完成很强大的缓存判断功能
剩下的代码就很简单了：
*/
function headerController(res, path, stat) {
  res.setHeader('Last-Modified', stat.mtime/*modifiedTime(Object Date)*/.toDateString())
}
app.use(path, express.static(pathToDirectory, {setHeader: headerController});

谢谢大家的解答:D

这篇关于javascript - img标签，同样的src，但是内容产生了变化，如何让缓存更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！