Hide an Image URL From Inspection and Page Source

Video Tutoral at https://youtu.be/mG0bV78HtvY

As a website owner, you might not want to reveal the image URL of your website for various reasons. Maybe you don't want other websites to hotlink your images or want to protect your images from being downloaded by others. Whatever your reason, hiding the image URL can be a useful technique. Use the necessary code below to hide an image URL from your website.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Hide Image URL</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="nature">Hello World!</div>
<script src="./script.js"></script>

</body>
</html>

Stylesheet

body {
    background-color: rgb(165, 169, 234);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nature {
    font: 5em Comic Sans Ms;
    color:rgb(13, 244, 113);
    display: grid;
    place-items: center;
    text-align: center;
    width: 700px;
    height: 400px;
    border: 3px solid #0059dd;
}

Image

.nature {
    background-image: url("https://i0.wp.com/allpicts.in/wp-content/uploads/2018/03/Natural-Images-HD-1080p-Download-with-Keyhole-Arch-at-Pfeiffer-Beach.jpg?resize=700%2C400");
}

JavaScript

css = document.createElement("link");
  css.setAttribute("rel", "stylesheet");
  css.setAttribute("href", "image.css");
  document.head.appendChild(css);

NEW POSTS

Main Menu

Hide an Image URL From Inspection and Page Source

No comments

Post a Comment

Latest Posts

Pages

NEW POSTS

Main Menu

Hide an Image URL From Inspection and Page Source

You Might Also Like

No comments

Post a Comment

Latest Posts

Pages