Hidden img src value

Question

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.

Hiding an image's source is a losing battle. There are tricks to fool someone who doesn't know what they're doing, but if the image is displayed, you can save it if you know what you're doing at all, no matter what you do. — James Montagne, Feb 18 '14 at 03:56

score 10 · Accepted Answer · edited May 23 '17 at 12:00

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

score 5 · Answer 2 · answered Feb 18 '14 at 03:58

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.

James Montagne · Answer 3 · 2015-03-31T13:54:57.430

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.

score 0 · Answer 4 · answered Feb 18 '14 at 04:00

0

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

answered Feb 18 '14 at 04:00

Bilal

2,645
3
28
40

score 0 · Answer 5 · edited Aug 26 '19 at 11:25

0

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>

edited Aug 26 '19 at 11:25

mplungjan

169,008
28
173
236

answered Mar 22 '16 at 06:19

kapil

1,710
1
15
12

Hidden img src value

5 Answers5

Linked