Html 隐藏的 img src 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21843946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hidden img src value
提问by Spedwards
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?
是否可以隐藏 img 标签的 src 值？例如：
<img src="image.jpg" />将出现为<img src="" />或某种其他类型的方法。即使用户右键单击以获取图像 url，我也不希望它被检索。这是可能吗？
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.
我无法访问 head 元素，也无法使用 Javascript 或 PHP。我只能使用Markdown接受的有限 HTML 标签。
回答by Aamir Shahzad
No its not possible to hide it through js/jquery or any scripting language. Though there are tweaks etc like you can disable right clickor showing fake image srcor setting image using CSS background-imageproperty (this way, the user won't be able to right click and save the image as) to deceive a common user;
不，不可能通过 js/jquery 或任何脚本语言隐藏它。尽管有一些调整，例如您可以禁用right click或显示假图像src或使用 CSSbackground-image属性设置图像（这样，用户将无法右键单击并将图像另存为）以欺骗普通用户；
<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 download2) Restricting images from direct url download
回答by Anonymous
I imagine that this would not be possible since altering the srcwith JavaScript would change the image itself. In addition, even ifyou were somehow hide the srcfrom the user, it could easily be retrieved by...
我想这是不可能的，因为src用 JavaScript改变会改变图像本身。此外，即使当你以某种方式隐藏src从用户，它很容易被检索...
- Right clicking on the image and pressing the Copy image URLoption, making it that much harder to prevent the user from viewing the source of the image
- Doing the same and pressing Save image as....
- 右键单击图像并按下Copy image URL选项，使阻止用户查看图像来源变得更加困难
- 做同样的事情并按下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.
你能做的最好的可能是禁用右键单击，但如果他们真的想弄清楚，那几乎不会阻止任何人。很可能有更多的方法，但简而言之，我会说这是不可能的。
回答by James Montagne
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.
虽然您无法完全隐藏图像（尤其是从开发工具或类似工具中），但您可以摆脱普通人。我见过的最好的技巧基本上是在 div 中放置一个透明的图像。然后将实际图像放置为 div 的背景图像。这样，实际的图片就只在css文件中，如果你右键点击图片并保存，你实际上得到了透明的图片，它可以是任何东西，纯黑色，随机文本等等。
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.
当然，如果您知道如何使用 firebug 或 chrome dev 工具，图像仍然很容易获得。
回答by kapil
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>回答by Bilal
No it is not possible. But you can restrict right click on a certain area of page using javascript/jquery.
不，这是不可能的。但是您可以使用javascript/jquery.
