是否有可能使用jQuery从服务器重新加载具有相同文件名的图像?
例如，我在页面上有一张图片，但实际的图像可以根据用户操作而改变。请注意，这并不意味着文件名会更改，而是实际的文件本身会发生更改。
即：
无论多少次调用下面的代码，都会出现相同的问题。
$("#myimg").attr("src", "/myimg.jpg");
看起来是你的浏览器缓存了这张图片（我现在注意到你在问题中提到了它）。你可以通过传递一个额外的变量来强制浏览器重新加载该图片，方法如下：
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
可能不是最好的方法，但我过去解决这个问题的方式是使用JavaScript将时间戳附加到图像URL上：
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());
下次加载时，时间戳会被设置为当前时间，并且URL也会有所不同，这样浏览器就会获取图像的GET请求而不是使用缓存版本。
imagename.jpg?t=1234567&q=.jpg或imagename.jpg#t1234567.jpg。 - FlameStorm这可能是你自己提到的两个问题之一。
老实说，我认为是第二个问题。如果我们能看到更多 jQuery 代码会更容易解决。但是首先可以尝试先删除属性，然后再设置它。只是为了看看是否有所帮助：
$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");
即使这个方法可行，我认为还是应该贴上代码，因为这不是最优解。
借助 jeerose 的想法，只需一行代码即可解决无需硬编码 JavaScript 中的图像 src 的问题：
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
//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，时间戳也会连接到网址中。我修改了已接受的答案来处理这个问题。
$('#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 + "'>");
}
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被发送到浏览器，并且服务器指示客户端将图像缓存时间延长。
如果这对您来说仍无法刷新图像，请查看此答案是否有帮助。有关更多信息，请参阅Cache-Control请求头的文档。
$("#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'的图片。因此，我始终可以获得最新版本的图像，而无需进行太多的服务器端解码。