使用JQuery从JSON响应更改背景图像时出现问题

Question

I'm trying to display results from an AJAX GET call, one of the results is a direct path to an image, problem is I'm not correctly appending the data to my html template.

This is the important part:

sliders_row += '<td><div style="width:100px; height:50px; outline:1px solid red; background-image:url(' + item.image + '); background-size:cover;"></div></td>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$.ajax({
 async: true,
 url: '/sliders',
 type: 'GET',
 dataType: 'JSON',
 success: function (data) { 
  $('.row[data-link=' + linked_entry + ']').remove();
  $.each(data.sliders, function (index, item) {
   var sliders_row = '<tr class="row" data-link="sliders">';
       sliders_row += '<td>' + item.title + '</td>';
       sliders_row += '<td>' + item.body + '</td>';
       sliders_row += '<td><div style="width:100px; height:50px; outline:1px solid red; background-image:url(' + item.image + '); background-size:cover;"></div></td>';
       sliders_row += '<td style="text-align:center;"><input type="checkbox" name="isVisible" '+(item.isVisible ? 'checked' : '')+'></td>';
       sliders_row += '</tr>';

   $('.entry_table_container[data-link=' + linked_entry + ']').append(sliders_row);
  });
 },
 error: function (data) {
  var errors = data.responseJSON;
  console.log(errors);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</div>

Answer 1

You need to add version parameter in image file url like:

Image.gif?v=12

and change every time when you render image