Javascript 强制重新加载背景图像

当ajax请求成功时，我需要强制刷新div背景图像。当ajax成功时，我的div背景图像url不变，但图像内容会更改。如何刷新背景url

JavaScript

    $.ajax({
 url: "editor/savemapimage.php",
 type:"POST",
 data:{imagevalue : urlimage},
success:function(data){$(".map_canvas").css("background-image","url("+data+")");},

---

如果结果数据是字符串，则上面的代码是

map.png

，所以这将是相同的，但我的php页面更新图像内容，所以每次更新图像时都需要刷新此url。

您应该向背景图像添加一些随机查询，然后再次设置

$.ajax({
    url: "editor/savemapimage.php",
    type:"POST",
    data:{imagevalue : urlimage},
    success:function(data){$(".map_canvas").css("background-image","url("+data+"?random="+ new Date().getTime()));},

---

您可以将唯一ID添加到图像url的末尾，如：

http://yourdomain.jpg?random=1239308234

如果ID是唯一的，浏览器将认为它是一个新的资源，并将重新加载图像。

const randomId = new Date().getTime();
$.ajax({
    url: 'editor/savemapimage.php',
    type: 'POST',
    data: {
        imagevalue: urlimage
    },
    success: function (data) {
        $('.map_canvas')
            .css('background-image', `url(${data}?random=${randomId}`);
    },
);

---

对于任何使用Canvas的人，您可能会遇到同样的问题。这肯定是发生在我的铬。Bas van Dijk的解决方案运行良好，因此只需像这样使用它：

$(document).ready(function() {

    //background image (add random variable to stop caching)
    var backgroundImage = new Image()
    backgroundImage.src = "my-image.png?r=" + new Date().getTime();

    var lc = LC.init(
        document.getElementsByClassName('literallycanvasdiv')[0],
        {
            backgroundColor: 'whiteSmoke', 
            backgroundShapes: [LC.createShape('Image', {x: 10, y: 10, image: backgroundImage, scale: 1})]
        }
    );
});

---

你必须编辑图片网址如下：谢谢！如果您不希望该查询字符串出现在那里，则更改为该随机字符串，然后再次删除它$（.map_canvas”）.css（“背景图像”、“url”（+data+））；