How to write image source in javascript with image name obtained from Django AJAX call

Question

I have an image name "not the complete file path" obtained from Django AJAX call. The object has so many values. I return json object. Then, I purse it to process it in javascript. I have some errors in the following:

$(document).on('click', '#post-det', function(e) {

e.preventDefault();

var post_id = $(this).children(':first-child').text();
var post_id = parseInt(post_id);

$.ajax({
      type: "GET",
      url: "{% url 'get_post_details' %}",
      dataType: "json",
      data: {
          "post_id": post_id
      },
      success: function(data) {
         alert(data);
        post_details(data);
      }
  });

});


function post_details(details) {

  var json = JSON.parse(details);

  var userusername= $('#user-username').text(json.user_username);


  alert(json.title);

  var post_images = $('#post-imgs').html(''); // RESET THE images div
  alert(json.images[0].image);

  for( var i = 0; i < json.images.image.length; i++) {


  post_images.html('<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">'+
  '<ol class="carousel-indicators">'+
    '<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>'+
    '<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>'+
    '<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>'+
  '</ol>'+
  '<div class="carousel-inner">'+
    '<div class="carousel-item active">'+
       '<img src='".."+"/"+".."+"/"+".."+"/"+".."+"/"+"media"+"/"+json.images[0].image+' class="d-block w-100" alt="...">'+
    '</div>'+
  '</div>'+
  '<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">'+
    '<span class="carousel-control-prev-icon" aria-hidden="true"></span>'+
    '<span class="sr-only">Previous</span>'+
  '</a>'+
  '<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">'+
    '<span class="carousel-control-next-icon" aria-hidden="true"></span>'+
    '<span class="sr-only">Next</span>'+
  '</a>'+
'</div>');


  }
  }

I have error in the following line

'<img src='".."+"/"+".."+"/"+".."+"/"+".."+"/"+"media"+"/"+json.images[0].image+' class="d-block w-100" alt="...">'+

Any help or suggestion will be highly appreciated. I prefer the solution to be in the javascript side NOT in Django. I could alert the images file name. which are correct. The images file name is in json.images[i].image

score 0 · Answer 1 · answered May 07 '20 at 03:48

I found the right answer in this answer posted by shmakovpn

I change this line:

'<img src='".."+"/"+".."+"/"+".."+"/"+".."+"/"+"media"+"/"+json.images[0].image+' class="d-block w-100" alt="...">'

to be

post_images.html('<img src="../../../../media/'+json.images[0].image+ '" class="d-block w-100" alt="..." />');

How to write image source in javascript with image name obtained from Django AJAX call

1 Answers1