Suppose there is a html page containing some images.
we want to disable the downloading of the images from user side.
Is that possible?
Should I need to use any javascript or add some attributes in <img> tag?
My current code is
<td><img src="images/handmade (1).jpg" class="img-responsive" alt="" /></td>
</tr>
</table>
Is there any technique to prevent image from downloading?
No, it cannot be done. Explanation here: https://graphicdesign.stackexchange.com/a/39464/24086
For all intents and purposes, this is downright impossible.
You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.
You can use a CSS background-image instead of HTML , but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.
You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.
Depends what you mean by downloading, really.
The user has to be able to download the image (i.e. retrieve the image onto their computer) in order to display the image in their browser. I suspect what you mean is that you want to stop them saving that specific image onto their computer. Any attempt to try and stop them doing this is pretty pointless, as they can always take a screenshot, or just access the image directly using the URL.
I've seen various attempts using javascript to try and stop users from saving images, but they are all easily worked around.
Cut up the image server-side and store them that way, then assemble them as one image in javascript client-side. The user could download each segment via URL and assemble them manually, but that is much more work than most users are willing to do.
Related
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I'm having a little challenge here. After changing banner images on some part of my homepage, it the new images don't show even after clearing cache and re-indexing. Can someone please advise me.
You could try adding a version number to the image path in your code, as detailed in this answer: Is there a way to force browsers to refresh/download images?
You just need to add ?1 at the end of the url like so:
<img src="image.png?1"/>
This normally happens because you need to clear your browser cache on whatever machine you're viewing the site with - a fast and easy way to find out if this is the case would be to throw your browser into private/incognito mode and refresh the page.
Is it legal to have an IFrame on a website which inside has an external website?
In an IFrame is it possible to only show a section of the src that isn't the top left of the site (for instance if there was a chart in the middle of a website, could u have just the chart in your Iframe, or at least start it centred there)
Is there any way to stop my IFrame from auto redirecting me to the external site
for 3: ie
<iframe src="http://fifa.com"></iframe>
Just sends me to fifa instead of actually showing that site in a frame.
Instead of using an iframe is it possible to copy the chart and source it back to where you got it from?
Fifa is probably using javascript to prevent you from placing the site in an iframe... and it's generally a pretty shady thing to do.
This depends on the rules of the external website. You should at least ask them for permission and only do it if they are OK with it (no replay does not mean they agree!)
No, an IFrame is like a new browser.
If the external site uses JavaScript to break out of frames, then the only way to prevent this is to disable JavaScript in your browser.
I guess it's legal, but it isn't decent.
Ah, so you only wanna show the scores i.e., I guess there should be a way, but again it's not decent, you just don't use such constructions, you just don't!
No! That's exactly the point of that redirect. The only way to do that will be with javascript disabled.
I'm trying to add an image to a generated html word document that is embedded in a classic ASP page. The code looks something like this:
<%
Response.ContentType = "application/msword"
%>
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word">
...
<v:shape id="_x0000_s1030" type="#_x0000_t75" style='position:absolute;
left:0;text-align:left;margin-left:0;margin-top:17.95pt;width:7in;height:116.85pt;
z-index:2;mso-position-horizontal:center;mso-position-horizontal-relative:page;
mso-position-vertical-relative:page'>
<v:imagedata src="http://xxx/image001.gif" o:title="image001"/>
<w:wrap anchorx="page" anchory="page"/>
<w:anchorlock/>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:0;left:0px;margin-left:0px;margin-top:24px;width:672px;
height:156px'><img width=672 height=156
src="http://xxx/image001.gif" v:shapes="_x0000_s1030"></span><![endif]>
The image URL is correct and can be viewed through a browser, however when the word document opens, the image has a red x, with the error message:
The image cannot be displayed. Your
computer may not have enough memory to
open the image, or the image may be
corrupted. Restart your computer, and
then open the file again. If the red x
still appears, you may have to delete
the image and then insert it again.
If i copy the html code and try to open the word document on my local machine, it displays the image correctly. It just doesn't work when retrieving the document from the server. This happens for any images I try to add. Is there another way to add images to html-generated word documents that can be output from an asp page?
Thanks.
Update:
Something that I've noticed is that when copying the word doc code from the asp page, pasting it into a file and renaming it as a word doc, I get this prompt when opening it:
Some of the files in this Web page aren't in the expected location. Do you want to download them anyway? If you're sure the Web Page is from a trusted source, click Yes.
If I click Yes, the image displays fine, if I click No, I get the same error as I described above. I'm thinking that because the word doc is coming from an ASP page, it is defaulting the security setting to not display external items. I've tried adding the site URL (it is a local intranet site) to my trusted sites and as a trusted location in word, but still no luck.
You could try removing the o:title tag. I've found that if that tag is there word tries to embed the image, but will only do so if it is in the proper location. By removing the o:title tag, word just treats it as a link.
Go into Options, Web Options (which might be under Advanced), uncheck "Rely on VML for displaying graphics in browsers"
Is all that code generated by Word 2007, or are you adding code by hand? It's interesting that the img tag doesn't have a slash to close it.
I know its a silly mistake, but did you make sure to put the image in the right place so that it can be accessed by the web page? If you just type in the http://xxx/image001.gif url into your browser, does the image appear? If not, I would say thats your problem.
Make sure the image's URL (location) is correct and add a slash.
If it still doesn't work, check if any other images from the same directory can display.
If they do then re-upload the image and try again.
If other images don't display and if you're sure that the URL is correct, then try editing the read permissions on the image directory and the images. I can't imagine that it could be caused by permissions though.
Unless there's a very specific reason to generate the HTML in MS Word, I'd advise you not to do it. Even for somebody who never saw HTML or CSS before, they're both very simple and tidy to learn and can produce much better results than MS Word.
Is Word 2007 allowed to access the internet? Maybe there's a firewall rule blocking it?
Replace the following line
"<v:imagedata src="............" o:title="image001"/>"
with simple a single line of code
"<img src="............"/>"
I am sure you will get the result.
I have checked it.
I have restricted the right click option in my web page, but in IE it shows icons to Save Image, Print, Mail etc . I want to remove all of these. Is this possible?
It seems like everyone else who answered here didn’t read the question.
I have restricted right clicking option in my web page , But IN IE it shows Icons to Save Image, print , mail etc . I want to remove all of these . IS it possible ??
Yes, it is possible to remove these icons. Just put the following in the <head> of your document.
<meta http-equiv="imagetoolbar" content="no" />
As mentioned in the other answers, users will still be able to get the images if they really want to, no matter how hard you try to prevent it. If you don’t want the images to be copied, you shouldn’t use them on a website.
It sounds like you're talking about the Image Toolbar in Internet Explorer. You can disable it with this code:
<html>
<head>
<meta http-equiv="imagetoolbar" content="no" />
</head>
</html>
Or, directly applied to an image:
<img src="test.gif" galleryimg="no" />
No it's not possible. The user can see the image in the browser and thus the browser (and the user) has a copy. You can try and restrict that with nasty (and ill-advised) right-click JS hacks and the like but ultimately if you send something to someone to see or read, what they do with it is beyond your control when you don't control the device they're using.
You can only do so much to prevent some users. To be near 100% foolproof, it's probably impossible. Even if you packaged the images in say, flash, java applet, it doesn't stop users from doing screencapture too.
There are few passive alternatives, e.g. using watermarks, putting up discalimers/warnings.
Here are some related SO posts:
How to disable right-click save on one specific image only
Disable “Save Target As” option in the right click menu
Prevent Save As Functionality
Prevent users from downloading images it's a waste of time because even if they cannot download the image, they always could do an screenshot :-(
if you are using Apache server, you can disable accessing the image through absolute url
the images can be access only with relative url with this htaccess code :
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
in addition, disable the right click context using JavaScript, and add a watermark to protect the copy rights
this will reduce the chance of saving the images
You cannot prevent the downloading of your images. Just by viewing them, the browser caches them.
If the browser can get it, then the user can somehow get it.
You could investigate using an HTML5 canvas or even (gasp) pixelized tables to render client-side.
.show_IMAGE
{
background-position : 0 -100px;
background-image : url('/images/flower.png');
background-repeat : no-repeat;width:50px;height:50px;
}
and add this class to DIV
< div class="show_IMAGE"></ div>
you cannot copy the image alone. if you get image from CSS.
You may try following steps:
Disable right click function on your website.
Disable image dragging on the image you want draggable="false"
Now your website is image theft protected!