How to hide an HTML generated link that should only be called by javascript addeventListener?

I have a Django app, and want to have an image appear on a webpage only when someone clicks a specific element/image 30 times as such:

var count = 0;

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

When this code is executed, the original image is replaced with the hidden image, which is hardcoded in the URL as such:

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

However, people can easily find the source of this image simply by inspecting the page source code, and I can't seem to hide it:

#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">

I tried to implement js solutions such as below, but to no avail.


What is the best way to hide the image url from the page source?

Back to Top