Force background image reload

Question

I need force to div background image refresh while my ajax request success My div background image url same not change but image content change while ajax success.how can i refresh background url.

JavaScript

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

Above code if result data is string something map.png so this would be same but my php page update image content so need refresh this url every time while image update.

Answer 1

You can add an unique ID to the end of the image url like:

http://yourdomain.jpg?random=1239308234

If the ID is unique the browser will consider it a new resource and will reload the image.

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}`);
    },
);