Question

我正在使用div来保存用户的个人资料照片。为了更新它，用户选择一个新图像，然后替换div中的旧图像。然后用户点击更新以上传新图片，但是当我从服务器获得响应并且具有相同div的相同页面加载时，它用旧图像填充div。我在调试器中跟踪了这个。在div更新之前我停在了线上，并在文件系统上检查它（正确的新图片在那里），然后我继续调试器并用旧图片填充div。如果我在一两秒钟后刷新页面，则会出现新图像。

div图片容器：

<div id="ProfilePictureBox"></div>

当页面加载以更新div时调用此函数

function preloadForm() {
    var url = '/FeatureServer/Authentication?action=getMyDetails&userName=' + userName;
    var req = $jQuery.ajax({
        url: url,
        type: 'GET',
        success: function (data, response, xhr) {
            var pic = data['ProfilePicture'];
            if (pic.length > 0) {
                pic = '/FeatureServer/' + pic;
                // pausing here and checking `pic` in the browser confirms its the correct image
                $jQuery("#ProfilePictureBox").css("background-image", 'url(' + pic + ')');
                // old image is loaded ^
            }
        }
    });
}

Answer 1

我猜您需要在图像路径的URL中添加时间戳类型的变量，以便每次显示新结果而不是缓存或旧结果。

例如，替换如下：

pic = '/FeatureServer/' + pic;

使用

pic = '/FeatureServer/' + pic + "?time=" + (new Date());

每次生成图像时，上面会添加一个新的日期/时间，每次路径都是唯一的。

希望这能解决您的问题。

刷新div中的图像

1 个答案: