一、问题描述      

        在做html项目中，有时候我们会遇到这种情况：web页面上有一个<image>标签，图片A的src路径为''XXX/XXX/XX.jpg''。进行调用摄像头或者执行某个图片生成函数后，如果选择让新图片覆盖旧图片，保证存储路径不变的话，页面可能会出现图片不刷新的情况。

二、产生原因       

       这是由浏览器的缓存机制导致的：浏览器在加载页面后，会对页面资源进行缓存，下次打开页面会优先从缓存中读取数据，由于图片的存储路径没有发生变化，即使图片A已经被覆盖了，但浏览器缓存的数据还是图片A，所以网页上显示的图片也不会发生变化。

三、解决方案

本文在这里说明两种比较简单的解决方案：

1.通过ctrl+F5强制刷新，跳过缓存，重新请求数据，此方法对部分浏览器有效（目前测试过chome和edge，均能生效）

2.给图片的url添加一个随机数（这里推荐使用时间戳），这样就算是同一张图片，在不断刷新时也会被判定成不同的图片，也就解决了缓存问题。这里用js和django环境下传递参数这两种方法分别实现：

js方法实现：

显示图片部分的html代码：

<div id="flot-pie" style="height: 500px">
              <img src="图片A路径" style="width: 100%;height: 100%;display: block" class="pic3" id="imc" alt="当前图片未生成" onclick="switchImg()">
          </div>

 在这里通过onclick进行点击监听，触发switchImg函数，对图片进行添加时间戳，JS代码如下：

function switchImg() {
				var ssr = "图片路径";
				var ima = document.getElementById("ima");
				var index = new Date().getTime();
				ima.src = ssr+"?res="+index;
          }

 这样就通过js，实现了图片的时间戳添加，从而解决了图片缓存的问题。实现效果如下：

html5本地缓存图片 html图片缓存处理_html5本地缓存图片

右键单击对应图片，选择检查，就能在浏览器的控制台查看到上图的属性，从图中可以看到，图片的url地址后面加了一个时间戳，且每次刷新后，时间戳都会改变，浏览器会判定为不同图片，从而不会调用缓存。

 

django环境下后端向前端传递url：

<div id="flot-lines" style="height: 500px">
              <img src="{{ message1 }}" style="width: 100%;height: 100%;display: block" class="pic1" id="ima" alt="当前图片未采集" onclick="switchImg()"></div>
        </div>

 与纯html不同，图片的src属性为{{message1}}，而不是一个地址，message1中存储的地址信息，由django后台的view.py中对应路由返回：

return render(request, 'login1.html', {"message1": "../static/assets/images/img-portfolio/portfolio2.jpg"})

添加时间戳代码如下：

import time

time_stamp = str(round(time.time()*1000))

def XXX
  '''执行函数'''
return render(request, 'login1.html', {"message1": "../static/assets/images/base_image.jpg?res=" + time_stamp})

这样同样能够给图片添加时间戳，实现出来的效果和JS方法一样。

四、其他方法

在查阅资料时，发现有的博主会推荐在html上使用meta标签添加属性值禁止缓存：

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
 <META HTTP-EQUIV="expires" CONTENT="0">

meta标签禁止缓存好像在h5中已无法生效，故此方法不再适用。

 

注：新人第一次写文章，可能写的比较乱，请多多包含，不足之处请指正。