使用 JavaScript 刷新图像后如何获取新的图像 URL？

浏览器缓存依赖图片 URL 来决定图片是否相同以及是否使用存储的版本。这意味着如果我们更改 URL 中的某些内容，然后尝试重新加载图像，缓存将不再能够更改它是相同的资源。缓存将再次从服务器获取它。

处理方法：要在不影响图像的情况下更改 URL，可以更改可以附加到 URL 末尾的参数。参数必须是唯一的。我们可以使用时间戳，URL 将始终是唯一的。

要在 JavaScript 中刷新图像，我们可以简单地选择img元素并将其 src 属性修改为目标图像的属性，以及时间戳参数以确保它不会从缓存中访问它。

例子：

  

    Refresh Image

  

    
    
  
    
        // Create a timestamp
        var timestamp = new Date().getTime();
  
        // Get the image element 
        var image = document.getElementById("gfgimage");
  
        // Adding the timestamp parameter to image src
        image.src = "bg.png?t=" + timestamp;
        console.log(image.src);
    

  

输出：

现在，即使图像被新图像替换，它也会加载新图像。一般来说，这可能会有一些性能问题，因为它不会使用缓存中的图像，而必须始终使用服务器中的图像。