HTML 如何让浏览器缓存图片重新加载

轮播效果已经实现了，pic2-pic4 需要定时更新图片，文件名不变，所以需要绕过浏览器的缓存问题，网上的方法就是给图片结尾时间或随机数，我用了+Math.random() 加随机数，然后浏览器缓存中也已经按定时加载了带有随机数结尾的图片

pic2.png?t=0.04027631228529205 pic2.png?t=0.07900295045139183 pic3.png?t=0.9565799922757663 ...

但浏览器页面上显示的轮播图还是初始页加载的图，没有变化，F5 刷新后，也只是将缓存中的随机图片文件给清理了，初始页图片都还在缓存里；只有 CTL+F5 才会重新加载；

<meta http-equiv="Refresh" content="30" />  # 也不起作用, F5 的效果

<!-- 轮播图容器 -->
<div id="roll">
     <ul class=""imglist> <!-- 图片容器 -->
          <li> <img src="/pic1.png" id="pic1"/> </li>
          <li> <img src="/pic2.png" id="pic2"/> </li>
          <li> <img src="/pic3.png" id="pic3"/> </li>
          <li> <img src="/pic4.png" id="pic4"/> </li>
     </ul>
</div>

<script>
    setInterval(function() {
         document.getElementById("pic2").innerHTML='<img src="/pic2.png?t=' +Math.random() + '" />';
         document.getElementById("pic3").innerHTML='<img src="/pic3.png?t=' +Math.random() + '" />';
         document.getElementById("pic4").innerHTML='<img src="/pic4.png?t=' +Math.random() + '" />';
     }, 6000);
</script>

我可能需要解决把新生成的带有随机数结尾的图片带