0

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
        }else{
            count++;
        }
}})

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' %}">
</div>

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.

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

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

Rivered
  • 741
  • 7
  • 27
  • If you're talking about "page source" as in **left-click + Inspect** then there isn't a way of hiding it. That's all client side stuff and if isn't in the source than it won't show on the browser – Nealium Sep 08 '22 at 17:48
  • Then this means that the image should be brought forth only by .js I suppose? – Rivered Sep 08 '22 at 18:24
  • You might be able to do a `MIMEImage` type thing, and use js like in: https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery – Nealium Sep 08 '22 at 18:29

0 Answers0