项目场景
今天要用
python
的
flask
框架做一个简单的
demo
网站。
问题描述
我的
index.html
文件中有一行代码：
<img id='input' src='input.jpg'/>
然后我需要通过
js
代码来更新
src
属性：
$("#input").attr('src', 'input.jpg')
但如果新的
src
属性值和原属性值相同时，发现图片并不会更新。
这里你可能会问，既然要更新src属性，为什么新的属性值还是和原来一样？其实是有这种需求的。比如一张名为a.jpg的图片，经过一系列的操作处理后，我需要保存，保存方式选择覆盖原图，那么保存后的图片不还是a.jpg嘛，虽然我们知道这个a.jpg和原来的a.jpg已经不是同一张图片了，但是浏览器中的html的img标签并不知道，因为图片名字并没有变化。
原因分析
推测可能是浏览器中的缓存机制造成的。虽然图片的内容改变了，但图片名字没有改变，浏览器中的
html
中的
img
标签没有检测到
src
属性值的变化，还是用的还是之前的缓存。
解决方案
在修改
img
的
src
属性的时候加上一个随机数即可，让浏览器以为每次请求的图片路径都不同，这样就能加载新的图片，而不是缓存。
$("#input").attr('src', 'input.jpg''?'+Math.random())
引用参考