Question

我的问题是我无法弄清楚如何重置{AJ}的值<img src=''的一部分。每次调用javascript函数时，都会添加ajax_value，因此我遇到了一个问题，即它一直添加此值而不先将其删除。看起来像这样：

问题：

/static/lpr_images/2018_04_14_08_00.png2018_04_14_08_01.png

情况：

<img src="{% static 'lpr_images/' %}" + ajax_value />

我尝试的东西，但他们没有工作：

$("#lcp_img").reset();引发错误Uncaught TypeError: $(...).reset is not a function

尝试了.remove()但删除了img代码。

base.html文件

...
<div class="modal-body">
    {% csrf_token %}
    <img id="lcp_img" src="{% static 'lpr_images/' %}" alt="My image"/>
    {{ form.as_p }}
    <br>
</div>
....

<script type="text/javascript">
function get_task_info(data) {
    $.ajax({
    ...
        document.getElementById('lcp_img').src += data.result.imageName;
        $("#exampleModal").modal('show');
};

function reset_img_src() {
        $('#lcp_img').reset();
      };
</script>

Answer 1

DOM没有任何关于＆＃34;最初＆＃34;的概念。那里;一旦你改变它，旧的价值就会消失。因此，您应该将其保存在其他位置，并且每次都使用该值。放置这样的东西的好地方是以data-为前缀的属性，因为jQuery可以使用.data() method直接访问它。

<img id="lcp_img" data-original-src="{% static 'lpr_images/' %}" alt="My image"/>

...

$.ajax({
...
    var img = $('#cp_img');
    img.attr('src', img.data('originalSrc') + data.result.imageName);
    $("#exampleModal").modal('show');
};

Answer 2

这样的事情怎么样？

<div class="modal-body">
    {% csrf_token %}
    <img id="lcp_img" src="placeholder.jpg" data-base-path="{% static 'lpr_images/' %}" alt="My image"/>
    {{ form.as_p }}
    <br>
</div>
<script type="text/javascript">
  function get_task_info(data) {
    $.ajax({
    ...
        const $img = $('#lcp_img');
        $img.attr('src', $img.data('basePath') + data.result.imageName);
        $("#exampleModal").modal('show');
    });
  }
</script>

编辑：丹尼尔罗斯曼打败了我。我们有类似的想法。但是像丹尼尔提到的那样，你需要一种方法来存储或记住你想用于图像位置的原始src或基本路径。这样，您只需将数据值附加到其中即可。

如何重置图像源中的变量？

2 个答案: