是否可以使用jQuery从服务器重新加载具有相同文件名的图像?
例如，我在页面上有一个图像，但是，物理图像可以根据用户操作而更改。注意，这并不意味着文件名发生了变化，而是实际的文件本身发生了变化。
ie:
用户在默认页面上查看图像 用户上传新图像 页面上的默认图像没有改变(我假设这是由于文件名相同，浏览器使用缓存版本)
不管下面的代码被调用的频率如何，同样的问题仍然存在。
$("#myimg").attr("src", "/myimg.jpg");
在jQuery文档中，如果“load”函数有一个默认方法来触发事件，而不是将回调函数绑定到成功/完成的元素加载，那么它将是完美的。
非常感谢任何帮助。
当前回答
只需一行，无需担心将图像SRC硬编码到javascript中(感谢jeerose的想法:
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
其他回答
我可能需要多次重新加载图像源。我用Lodash找到了一个很适合我的解决方案:
$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());
现有的时间戳将被截断并替换为新的时间戳。
使用“#”作为分隔符可能会有用
我的图像保存在“www”上面的“隐藏”文件夹中，这样只有登录用户才能访问它们。由于这个原因，我不能使用普通的<img src=/somefolder/1023.jpg>，但我发送请求到服务器像<img src=?1023>，它通过发回名称为'1023'的图像进行响应。
该应用程序用于裁剪图像，因此在ajax请求裁剪图像后，它将作为服务器上的内容进行更改，但保留其原始名称。为了查看裁剪的结果，在ajax请求完成后，将从DOM中删除第一个图像，并插入一个具有相同名称的新图像<img src=?1023>。
为了避免兑现，我在请求中添加了“时间”标签，前面加了“#”，这样它就变成了<img src=?1023#1467294764124>。服务器会自动过滤掉请求的哈希部分，并通过发送我的“1023”图像来正确响应。因此，我总是得到图像的最后一个版本，而没有太多的服务器端解码。
听起来好像是您的浏览器缓存了图像(我现在注意到您在问题中写了这个)。你可以通过传递一个额外的变量来强制浏览器重新加载图像，如下所示:
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
您是否尝试重置图像容器html。当然，如果是浏览器在缓存，那么这就没有帮助了。
function imageUploadComplete () {
$("#image_container").html("<img src='" + newImageUrl + "'>");
}
根据@kasper Taeymans的回答。
如果你只是需要重新加载image(而不是用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>
