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

Question

我的问题是我不知道如何重置 <img src='' 的一部分这是来自 AJAX 的值。每次调用 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 对于“最初”的内容没有任何概念；一旦你改变了它，旧的值就消失了。因此，您应该将其保存在其他地方，并每次都使用该值。放置此类内容的好地方是在以 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');
};