Html 强制刷新网页图像的最佳方法是什么？

我有一个asp.net-mvc网站。在其中一个页面上，我有一个图像，我使用它来允许用户裁剪图像。当单击submit时，我会在服务器端裁剪图像，然后重新加载页面。问题是图像看起来和以前一样。如果我按F5并刷新页面，则会显示更新的图像

---

在这种情况下，有没有办法避免强制F5刷新？

我建议将裁剪的坐标发布到php脚本中，在php中裁剪，给它一个新名称，然后将SRC属性设置为新图像的url

类似但需要整理的东西：

jcrop页面：

<form id="crop_settings" action="saveimage.php" method="post" style="display:none">
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
</form>

<button id="save_picture">save image</button>

<script>
    $('#cropbox').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview
    });
    function updatePreview(c){
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
    $("#save_picture").click(function(){//some save button
        $.ajax({
            type: "POST",
            url: "saveimage.php",
            data: $("#crop_settings").serialize(),
            success: function(data){
                $(#the_display_image).attr("src","new.jpg")
            }
        });
    });
</script>

---

一些技巧是更改图像的名称。您还可以更改HTTP标头，以确保浏览器不会缓存图像

---

您应该能够使用JQuery刷新图像

$("#image").attr("src", "/imagecropped.jpg");

基本上，当用户提交裁剪后的图像时，需要再次设置图像的src

如果图像具有相同的名称，则可能会遇到的另一个问题是浏览器缓存

---

这已经在这里得到了回答：

这是一个技巧，但它是有效的

在图像url中输入一个变量和随机数。比如：

<img src="photo.jpg?xxx=987878787">

---

也许有更好的方法，但对我来说很有效。

在其他答案之一上展开

如果您的服务器上有照片，或者可以访问照片，则可以统计文件本身，并在图像源中使用修改后的时间：

<?php

    if (is_file($PathToFile . '/photo.jpg'))
    {
       $FileDetails = stat($PathToFile . '/photo.jpg');
       echo '<img src="photo.jpg?MT=' . dechex($FileDetails['mtime']) . '" />';
    }

?>

---

这提供了两个方面的最佳效果，因为它将正常使用浏览器缓存，但如果图像文件发生更改（例如，通过重新上载），将强制重新读取

我想你可以做一个javascript民意调查，请求新图像并放入一个替换dom对象？stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url页面也有一些很好的答案，详细描述了缓存和独特的U.R.I.技术的优缺点。谢谢！这是金色的！提示：如果您使用数据库获取图像，您可以存储上次修改的字段，并使用该字段而不是读取文件。最好回答我的观点，谢谢。在python中，它类似于：

from os.path import basename，getmtime file_name='%s？%s'（basename（file_path），getmtime（file_path））

它返回类似于

img_0001.jpg？1616065600.4623241

的内容如果您希望每次重新加载它，只需将php或JS中的time（）或您使用的任何内容添加到查询字符串中即可。酷技巧，我正在使用刚刚制作的angularJS:$scope.TimeToday=newDate（）；并将其添加到url中

<?php

    if (is_file($PathToFile . '/photo.jpg'))
    {
       $FileDetails = stat($PathToFile . '/photo.jpg');
       echo '<img src="photo.jpg?MT=' . dechex($FileDetails['mtime']) . '" />';
    }

?>