![网页中通过js修改img的src属性刷新图片,第1张 网页中通过js修改img的src属性刷新图片,第1张](/aiimages/%E7%BD%91%E9%A1%B5%E4%B8%AD%E9%80%9A%E8%BF%87js%E4%BF%AE%E6%94%B9img%E7%9A%84src%E5%B1%9E%E6%80%A7%E5%88%B7%E6%96%B0%E5%9B%BE%E7%89%87.png)
业务:采购业务流程中当财务人员打款后需要将打款流水图片上传到ftp服务器上。可是有时会上传出错。所以这里需要一个修改的图片的按钮。问题:当img的src的URL地址与之前相同(只更改图片,名称不变,不同图片相同名称)时,结果图片不变化,还是之前的图片。但通过chrome调试发现图片确实是变化的。那造成这个问题的原因时什么呢?方法:只需要每次刷新图片时,在img的src地址后面拼接一个随机数即可。例子:原有图片地址:<img src="http://img.boredou.com/1234556788.jpg" /> 修改后图片地址:<img src="http://img.boredou.com/1234556788.jpg?23333333" /> 原理:经过在浏览起端调试,发现当src的地址不变时,浏览器会从缓存里面取出来。而浏览器缓存的还是之前的图片。所以图片不会变化。 而当img的src中拼接了随机参数,那么浏览器会认为这是一张新的图片(或者说访问了不同的路径),浏览器每次访问都会访问服务器,而不会访问缓存里数据。
1、jquery方式:
$("#img").attr("src",url)
2、原生javascript方式:
var element = document.getElementById('myimage')
element.src = "image/a/053120.jpg"
JS中改变<img>的src,不正确的解决办法:在改变之后的src后面加上“Date()”。
例:
<img src="images/image01.jpg" id="myImage" />
然后改变时,使用js脚本:
document.getElementById('myImage')。src='images/image02.jpg‘ + Date();