JS动态获取图片缓存问题解决

本文原地址

问题场景

·需求：

用户修改商品图片，需要及时更新商品图片，以便用户确认修改图片成功。

·问题：

上传一张图片，通过js更新src属性刷新图片使其即时显示时，当img的src与上次地址无变化时（只更改图片，名称不变，不同图片名称相同）仍显示原来的图片。

·原因：

当src的地址不变时浏览器不会重新加载图片仍从缓存里面读取。

解决：

通过前台处理，让JS每次生成一个随机数作参数放在sre后边，但该参数没有实际意义。

eg.
<img src='" + imgsrc + "t=" + Math.random() + "'>

原理：

由于在img的src中增加了随机数参数，多次访问图片时，浏览器认为是访问了不同的图片路径，浏览器会每次重新访问服务器读取图片， 而不再读取缓存中的图片。