CODEWITHSUNDEEP
htmljquerydjango
Marie Loise
Marie Loise

Reputation: 107

Replace image src path using span

Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance

Jquery

 $(document).on('click', 'a[data-role=show_scanned]', function(){
      let csrf = $('input[name=csrfmiddlewaretoken]').val();
      var path = $(this).attr('id');  #Image path example:  image.jpg
      var assign = $("#image").html(path);
      $("#scanned_show").modal('show');
 });

html retrieve

<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">

Upvotes: 0

Views: 481

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

The line below can get the text of a span

$("#image").text()

You can then assign this to the src attribute of the img tag:

$("#imageDisplay").attr("src", $("#image").text() );

Demo:

// Add click event
$("#load").click(function() {

  // Add text from span to src attribute of img
  $("#imageDisplay").attr("src", $("#image").text());

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">

Upvotes: 1

Related Questions