How to get the value of a {{variable}} of django template in javascript?

I'm gettig value of img from views.py now, I want that when user click on the image, it should open in a modal.

1. index.html image sections:

<!-- Card body -->
<div class="card-body">
   {% for val in data.list %}
   <img src="{{val.Img}}" class="img-thumbnail pop_img">   -------here i'm getting the image properly and the path is showing correctly
   {% endfor %}
</div>

2. index.html modal section

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
      </div>
    </div>
  </div>
</div>

3. main.js

$(function() {
        $('.pop_img').on('click', function() {
            var img = $(this).find('img').attr('src')
            console.log(img)         -----------------but on console it prints : undefined 
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');
        });
});

and while inspecting on elements, it shows <img src(unknown)> inside modal.

How can I get the value of src attr value and place it on modal?