Как скрыть HTML-генерируемую ссылку, которая должна вызываться только javascript addeventListener?

У меня есть приложение Django, и я хочу, чтобы изображение появлялось на веб-странице только тогда, когда кто-то щелкнет определенный элемент/изображение 30 раз следующим образом:

var count = 0;

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector("#PDDO").onclick = function(){
        if(count > 30){
        document.querySelector("#PDDO").src = document.querySelector("#PDDO").dataset.over
        }else{
            count++;
        }
}})

Когда этот код выполняется, оригинальное изображение заменяется скрытым изображением, которое жестко закодировано в URL таким образом:

<img src="{% static 'database/images/original_image.png' %}" width="200", height="200", class="revolve" id="PDDO" data-over="{% static 'database/images/new_image.png' %}">
</div>

Однако, люди могут легко найти источник этого изображения, просто просмотрев исходный код страницы, и я не могу скрыть его:

#Page source:
<img src="/static/database/images/original_image.png" ,="" class="revolve" id="PDDO" data-over="/static/database/images/new_image.png" width="200" height="200">

Я пытался реализовать js решения, такие как приведены ниже, но безрезультатно.

$("a[data-label='document.querySelector("#PDDO").dataset.over']").hide()

Какой лучший способ скрыть url изображения от источника страницы?

Вернуться на верх