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

【问题标题】：How to refresh the src of <img /> with jQuery?如何用jQuery刷新<img />的src？
【发布时间】：2010-01-04 06:52:39
【问题描述】：

<img src="test.php" />

其中 test.php 生成带有随机数的图像。

试过了：

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

但它不起作用。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以通过在末尾附加一个随机字符串来强制刷新，从而更改 URL：

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

【讨论】：

Eww。不，不要。而是在服务器上设置适当的缓存响应标头。
Cache-control、Expires 等。仅在收到 HTTP 请求后才起作用 - 以上只是强制客户端发出该请求。在没有Image.reload (AFAIK) 的情况下，这是发出新请求的最简单方法
会建议将 src 属性上的子字符串设置为“？”这样在第一次之后，它就不会继续附加更多的查询字符串数据......
这与jeerose在此线程中的回复相同：stackoverflow.com/questions/2104949/…
@KPrime 这太棒了！！我努力了好几个小时才能让它发挥作用。谢谢！！

【解决方案2】：

添加时间戳或随机数：

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

【讨论】：

时间戳是更好的解决方案！有时你不能依赖随机不一样。
试过了，但在 chrome 中遇到了问题。图像 src 附加了时间戳，但缩略图没有刷新。你能在这方面给我建议吗？
@RohanPatil - 这里有一个明显的问题 - 您想添加或更新查询参数 - 此代码只是部分解决方案 -它假设没有查询参数开始（此外，我怀疑它只能工作一次）。

【解决方案3】：

采用 KPrimes 的出色答案并添加跟踪器建议，这就是我想出的：

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;
    });
});

【讨论】：

【解决方案4】：

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

【讨论】：