CODEWITHSUNDEEP
htmlcss
Spedwards
Spedwards

Reputation: 4492

Hidden img src value

So I'm not sure if this is even possible as I couldn't find anything by searching however I would like confirmation.

Is it possible to to hide the src value of the img tag? For example: <img src="image.jpg" /> would appear as <img src="" /> or some other sort of method. Even if the user right clicks to get the image url, I don't want it being retrieved. Is this at all possible?

I don't have access to the head element, nor can I use Javascript or PHP. I can only use limited HTML tags that are accepted by Markdown.

Upvotes: 5

Views: 37041

Answers (5)

kapil
kapil

Reputation: 1749

There is no way you can prevent it from downloading.But you can add a tweak so it wont be easy to reach. Add image as a background to given division.This will do it.

div {
  width:1900px;
  height:628px;
  background-image: url(http://www.trafficsource.co.uk/wp-content/uploads/2015/02/section4-bg.jpg);
}
<div></div>

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

While you can't hide the image completely (particularly from dev tools or the like), you can throw off your average person. The best trick I've seen essentially places a transparent image inside a div. The actual image is then placed as the background image of the div. In this way, the actual image is only in the css file and if you right click on the image and save it, you actually get the transparent image, which can be anything, solid black, random text, whatever.

http://jsfiddle.net/9V3v2/2/

Notice in the fiddle if you right click on save the image (or open the image in a new tab) it's actually a different image than the one you see. 

<div>
    <img src="http://FAKE-PLACEHOLDER-IMAGE-HERE"/>
</div>

img{
    width: 100%;
    height: 100%;
    opacity: .01;  /* effectively transparent but still right-clickable */
}

div{
    width: 500px;
    height: 500px;
    background-image: url(http://REAL-IMAGE-HERE);
}

Of course if you know how to use firebug or chrome dev tools, the image is still very easily available.

Upvotes: 7

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

No its not possible to hide it through js/jquery or any scripting language. Though there are tweaks etc like you can disable right click or showing fake image src or setting image using CSS background-image property (this way, the user won't be able to right click and save the image as) to deceive a common user;

<body oncontextmenu="return false">
</body>

What i understand, your wish is to restrict users from stealing your images by hiding the image source. Remember, if a user can see the image on their browser, then it means the user has downloaded the image and it is already on their computer. Simple is that. There is no way to prevent images from being stolen.

Even if you managed to somehow invent a way for an image to be shown on the customers computer without them downloading it, then they can still take a screen shot, and again your plans have been failed.

Some helping links for you (questions like yours)

1) Protect image download 2) Restricting images from direct url download

Upvotes: 10

Bilal
Bilal

Reputation: 2673

No it is not possible. But you can restrict right click on a certain area of page using javascript/jquery.

Upvotes: 0

Anonymous
Anonymous

Reputation: 12017

I imagine that this would not be possible since altering the src with JavaScript would change the image itself. In addition, even if you were somehow hide the src from the user, it could easily be retrieved by...

  • Right clicking on the image and pressing the Copy image URL option, making it that much harder to prevent the user from viewing the source of the image
  • Doing the same and pressing Save image as....

The best you could do would probably be to disable right clicking, but that would stop almost nobody if they really wanted to figure it out. There are most likely even more ways, but, in short, I would say that it is not possible.

Upvotes: 5

Related Questions