网页中通过js修改img的src属性刷新图片_教程

业务：

采购业务流程中当财务人员打款后需要将打款流水图片上传到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中拼接了随机参数，那么浏览器会认为这是一张新的图片（或者说访问了不同的路径），浏览器每次访问都会访问服务器，而不会访问缓存里数据。

用setAtrribute()方法

举个例子

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//获取到图片标签标签

var img = document.getElementsByTagName("img")[0]

//设置图片路径

img.setAttribute("src","2.jpg")

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

网页中通过js修改img的src属性刷新图片