使用jQuery从服务器重新加载具有相同文件名的图像而不使用缓存

非 ~ 常 ~ 简 ~ 单 ~

原因

虽然图像本身内容发生了变化，但他的名字并没有改变，浏览器会直接从缓存中读取(除非你使用了Post请求)，然而这并不是我们想要的.

解决办法

前端读取本地图像是根据路径来找的，那么我们只需在路径后边加一个一直改变的参数即可，比如时间戳，这样就直接迫使浏览器认为这是跟上一张不同路径的图而重新加载一遍本地资源.

举个例子

这里用Django举例，本来中规中矩的前端img标签，只需在src后边添加一个小小的“?”，即可强迫浏览器干他不想干的事。

前端代码

<img id="detect_img" style="width: 100%;height: 100%" src="/static/detect.jpg">

后端代码

return JsonResponse({'img_path': '/static/data/detect.jpg?' + str(time.time())})