是否可以使用 jQuery 从服务器重新加载具有相同文件名的图像？
例如，我在页面上有一个图像，但是，物理图像可以根据用户操作而改变。请注意，这并不意味着文件名发生变化，而是实际文件本身。
即：
无论调用以下代码的频率如何，同样的问题仍然存在。
$("#myimg").attr("src", "/myimg.jpg");
在 jQuery 文档中，如果“加载”函数具有触发事件的默认方法，而不是将回调函数绑定到元素的成功/完整加载，那么它会是完美的。
非常感谢任何帮助。
【问题讨论】：
标签： jquery
听起来是您的浏览器在缓存图像（我现在注意到您在问题中写道）。您可以通过传递一个额外的变量来强制浏览器重新加载图像，如下所示：
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
【讨论】：
random发生冲突，除非你是 真的真的快。 ;^) 在客户端上获取日期并不占用大量资源，您可以一次提取尽可能多的图像，因此请继续执行第 4 步。利润。
这可能不是最好的方法，但我过去通过简单地使用 JavaScript 将时间戳附加到图像 URL 来解决这个问题：
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());
下次加载时，时间戳设置为当前时间，并且 URL 不同，因此浏览器对图像进行 GET，而不是使用缓存版本。
【讨论】：
imagename.jpg?t=1234567&q=.jpg 或imagename.jpg#t1234567.jpg
这可能是您自己提到的两个问题之一。
说实话，我认为它是第二名。如果我们能看到更多的 jQuery，会容易得多。但首先，请先尝试删除该属性，然后再重新设置。只是看看这是否有帮助：
$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");
即使这可行，请发布一些代码，因为这不是最佳的，imo :-)
【讨论】：
只需一行，无需担心将图像 src 硬编码到 javascript 中（感谢 jeerose 的想法：
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
【讨论】：
要绕过缓存和避免将无限时间戳添加到图像 url，在添加新时间戳之前去除之前的时间戳，这就是我的做法。
//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);
function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
//get the src attribute
source = jQuery(".xyro_refresh").attr("src");
//remove previously added timestamps
source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
//prep new src attribute by adding a timestamp
new_source = source + "?timestamp=" + new Date().getTime();
//alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
//set the new src attribute
jQuery(".xyro_refresh").attr("src", new_source);
}
【讨论】：
这很好用！但是，如果您多次重新加载 src，时间戳也会连接到 url。我已经修改了接受的答案来处理这个问题。
$('#image_reload_button').on('click', function () {
var img = $('#your_image_selector');
var src = img.attr('src');
var i = src.indexOf('?dummy=');
src = i != -1 ? src.substring(0, i) : src;
var d = new Date();
img.attr('src', src + '?dummy=' + d.getTime());
});
【讨论】：
您是否尝试过重置图像容器 html.当然，如果是浏览器正在缓存，那么这将无济于事。
function imageUploadComplete () {
$("#image_container").html("<img src='" + newImageUrl + "'>");
}
【讨论】：
有时实际上解决方案像 -
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
也没有正确刷新 src，试试这个，它对我有用 ->
$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
【讨论】：
我的图像保存在“www”上方的“隐藏”文件夹中，因此只有登录的用户才能访问它们。出于这个原因，我不能使用普通的<img src=/somefolder/1023.jpg>，但我向服务器发送请求，如<img src=?1023>，它通过发回名称为“1023”的图像来响应。
该应用程序用于图像裁剪，因此在 ajax 请求裁剪图像后，它在服务器上更改为内容，但保留其原始名称。为了查看裁剪的结果，在ajax请求完成后，将第一张图片从DOM中移除，并插入一个同名<img src=?1023>的新图片。
为了避免兑现，我在请求中添加了以“#”开头的“时间”标签，这样它就变成了<img src=?1023#1467294764124>。服务器会自动过滤掉请求的哈希部分，并通过发回我保存为“1023”的图像来正确响应。因此，我总是在没有太多服务器端解码的情况下获得图像的最新版本。
【讨论】：
基于@kasper Taeymans 的回答。
如果你只是需要重新加载图片（不是用 smth new 替换它的 src），试试：
$(function() {
var img = $('#img');
var refreshImg = function(img) {
// the core of answer is 2 lines below
var dummy = '?dummy=';
img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());
// remove call on production
updateImgVisualizer();
};
// for display current img url in input
// for sandbox only!
var updateImgVisualizer = function() {
$('#img-url').val(img.attr('src'));
};
// bind img reload on btn click
$('.img-reloader').click(function() {
refreshImg(img);
});
// remove call on production
updateImgVisualizer();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">
<p>
<label>
Current url of img:
<input id="img-url" type="text" readonly style="width:500px">
</label>
</p>
<p>
<button class="img-reloader">Refresh</button>
</p>【讨论】：
我可能需要多次重新加载图像源。我找到了一个适合我的Lodash 解决方案：
$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());
现有时间戳将被截断并替换为新时间戳。
【讨论】：
如果您需要刷新确切的 URL 并且您的浏览器缓存了图像，您可以使用 AJAX 和请求标头来强制您的浏览器下载新副本（即使它还没有过期）。以下是你的做法：
var img = $("#myimg");
var url = img.attr("src");
$.ajax({
url: url,
headers: { "Cache-Control": "no-cache" }
}).done(function(){
// Refresh is complete, assign the image again
img.attr("src", url);
});
没有其他方法对我有用，因为虽然将令牌附加到查询字符串会下载新图像，但它不会使旧 URL 处缓存中的图像无效，因此未来的请求将继续显示旧图像。旧 URL 是唯一发送到浏览器的 URL，服务器指示客户端缓存图像的时间超过了应有的时间。
如果这仍然没有为您刷新图像，请查看this answer helps。如需更多信息，请参阅Cache-Control request header 上的文档。
【讨论】：
在html中：
foreach (var item in images) {
<Img src="@Url.Content(item.ImageUrl+"?"+DateTime.Now)" >
}
【讨论】：
我只是在 html 中这样做：
<script>
$(document).load(function () {
d = new Date();
$('#<%= imgpreview.ClientID %>').attr('src','');
});
</script>
然后像这样在后面的代码中重新加载图像：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
image.Src = "/image.jpg"; //url caming from database
}
}
【讨论】：