解决html的img标签src属性值相同时，图片并不刷新的问题

Posted 2021-06-07 Xavier Jiezou

项目场景

今天要用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())

引用参考

https://blog.csdn.net/joker_zhou/article/details/50137127