How to hide image link in html-CodePudding

<img src="https://i.ibb.co/FqvPFd2/Json-Data-Sorting.png" />

I would like to hide it's link when we use viewsource:sitelink

Is there anyway i can do it

I saw site doing it when i tried to do inspect there was full base64 data

CodePudding user response：

You can't hide the image link or data when you are serving the image through your website for more information please read the answer to this question: Hidden img src value. Though you can also try using base64 in your website just for sake of fake security as they can also be downloaded easily. But you will not give up where your data is stored that is a plus point.

As you didn't mention if you use any backend for automating the task. I have provided in both HTML and PHP.

HTML: How to display Base64 images in HTML

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

PHP: https://www.geeksforgeeks.org/how-to-convert-an-image-to-base64-encoding-in-php/

<?php 
  
// Get the image and convert into string
$img = file_get_contents(
'https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png');
  
// Encode the image string data into base64
$data = base64_encode($img);
  
// Display the output
echo $data;
?>

You should echo in img src tag but if possible create a function to return the data and then use it as img src.

CodePudding user response：

try to do a

if(viewsourceTrue){
<img src="https://i.ibb.co/FqvPFd2/Json-Data-Sorting.png" style="display:hidden"/>
}