如何使用jQuery刷新<img />的src？

Question

<img src="test.php" />

test.php 生成一个随机数图片。

我尝试过：

$('#verifyimage').click(function() {
        $(this).attr('src',$(this).attr('src'));
    });

但它不起作用。

- user198729

Answer 1

您可以通过在结尾添加一个随机字符串来强制刷新页面，从而改变URL：

$('#verifyimage').click(function() {
    $(this).attr('src', $(this).attr('src')+'?'+Math.random());
});

- K Prime

---

不要这样做。相反，在服务器上设置适当的缓存响应头。 - Nicolás

Cache-control，Expires等只有在接收到HTTP请求后才起作用 - 上述内容仅是为了强制客户端发出该请求。在缺少Image.reload（据我所知）的情况下，这是使新请求的最简单方法。 - K Prime

建议将src属性中的子字符串改为 "?"，以便在第一次后，它不会继续附加更多的查询字符串数据... - Tracker1

这与jeerose在此线程中的回复相同策略：https://dev59.com/DnI95IYBdhLWcg3w5SSh - Vanja

@KPrime 这太棒了！！我花了很多小时来让它工作。谢谢！！ - Dilip

Answer 2

添加时间戳或随机数：

var timestamp = new Date().getTime();
$(this).attr('src',$(this).attr('src') + '?' +timestamp );

- Kobi

---

时间戳是更好的解决方案！有时候，您不能依赖随机数不相同。 - jerwood

我尝试了这个，但在Chrome浏览器中遇到了问题。图像src被附加了时间戳，但缩略图没有刷新。你能给我提供任何建议吗？ - Rohan Patil

@RohanPatil - 这里有一个明显的问题 - 你想要添加或更新一个查询参数 - 这段代码只是一个部分解决方案 - 它假设一开始没有任何查询参数（此外，我怀疑它只能工作一次）。 - Kobi

Answer 3

借鉴KPrimes的优秀答案并结合Tracker的建议，我得出了以下结论：

jQuery(function($) {
    // we have both a image and a refresh image, used for captcha
    $('#refresh,#captcha_img').click(function() {
       src = $('#captcha_img').attr('src');
   // check for existing ? and remove if found
       queryPos = src.indexOf('?');
       if(queryPos != -1) {
          src = src.substring(0, queryPos);
       }    
       $('#captcha_img').attr('src', src + '?' + Math.random());
       return false;
    });
});

- SeanDowney

Answer 4

在 test.php 中设置 Content-Type: 的头部为 image/jpeg。

- claws