在django中使用javascript更改img src的最好方法是什么？

Question

我可以使用onclick和不带django模板标记的硬路径来更改img src。我的印象是这是一种糟糕的做法。如何在每次点击图片时将"{% static 'indv_proj\Metron Pres\Slide3.JPG‘%}“格式注入/更改到html img src中？

JavaScript：

$(document).ready(function(){
        $("#indv-ppt").click(function(){
            // Change src attribute of image
            $(this).attr("src", "{% static 'indv_proj\Metron Pres\Slide3.JPG' %}");
        });
    });

HTML：

  <div class="ppt-slides">
    <img id= indv-ppt src="{% static 'indv_proj\Metron Pres\Slide1.JPG' %}"  alt="Error">
  </div>

Answer 1

您可以尝试这样做：

HTML

<div class="ppt-slides">
   <img src="{% static 'indv_proj\Metron Pres\Slide1.JPG' %}" id="indv-ppt" alt="Error" data-original="{% static 'indv_proj\Metron Pres\Slide3.JPG' %}" onclick="imgchange()">
</div>

JavaScript

function imgchange(){
    var element = document.getElementById("indv-ppt");
    var src = element.getAttribute("data-original");
    element.setAttribute("src", src);
}

我对Jquery了解不多，但我希望你能理解其中的逻辑。

Answer 2

HTML

  <div class="ppt-slides">
    <img id= "indv-ppt" src="{% static 'indv_proj\Metron Pres\Slide1.JPG' %}"  alt="Error">
  </div>

此外，对于初学者来说，在控制台上打印一些东西来确定bug的实际位置也是一种很好的做法。