Why can't I do <img src = "C: /localfile.jpg">?
It works if the html file is local (on my C drive), but not if the html file is on the server, and the image file is local. Why is this?
Possible workarounds?
This would be a security vulnerability if the client could request files on the local file system and then use JavaScript to determine what was in them.
The only way to create this extension is in the browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.
The browser is denied access to the local file system if you do not get access to the local html page. You must upload the image somewhere. If it is in the same directory as the html file, you can use <img src="localfile.jpg"/>
Should you not use "file: // C: /localfile.jpg" instead of "C: /localfile.jpg"?
C: not a recognized URI scheme. Instead, try file://c|/...
IE 9: If you want the user to look at the image before sending it to the server: The user must ADD the website to the list of trusted websites.
Newtang's observation of security rules aside, how do you know that anyone who views your page will have the correct images in c:\localfile.jpg ? You can not. Even if you think you can, you cannot. This assumes a Windows environment, on the one hand.
Honestly, the easiest way was to add file hosting to the server.
Open IIS
Add default virtual directory to default
- The virtual path will be what you want to view in the browser. Therefore, if you select "server_name / image", you can go to it by going to http: // serverName / images
- Then add the physical path to drive C:
Add the appropriate permissions for the folder on drive C: "NETWORK SERVICE" and "IIS AppPool \ DefaultAppPool"
Refresh default website
And you're done. Now you can go to any image in this folder by going to http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg and using this url in your img src
Hope this helps someone
I see two possibilities for what you are trying to do:
Do you want your web page running on the server to find the file on the computer that you originally developed it?
Do you want him to extract it from the computer that is being viewed on the page?
Option 1 just does not make sense :)
Option 2 is a security hole; the browser prevents a web page (served from the Internet) from loading content on a viewing machine.
Kyle Hudson told you what you need to do, but it's so thorough that I find it hard to believe that this is all you want to do.
If you use a Chrome Chrome browser, you can use this as
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px"> But if you are using Mozilla Firefox, you need to add the โfileโ ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px"> You need to upload an image and then a link to the image on the server.
how about the image being selected by the user? Use the input tag: file, and then after selecting the image, show it on the clientโs web page? This is doable for most things. Now I'm trying to get it to work for IE, but, like all Microsoft products, this is a fork () cluster.
If you host the local site only for yourself or for specific clients, you can get around this by running mklink/D MyImages "C: /MyImages" in the root directory of the website as an administrator in cmd. Then in html do <img src="MyImages/whatever.jpg"> and the symbolic link set by mklink will connect the relative src link to the link on your C drive. It solved this issue for me, so it can help others who come to to this issue.
(Obviously this will not work for public websites, as you cannot easily run cmd commands on people's computers)
we can use javascript FileReader () and the readAsDataURL (fileContent) function to show the local disk / folder file. Bind the change event to the image, then call the showpreview javascript function. Try this -
<!doctype html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> function showpreview(e) { var reader = new FileReader(); reader.onload = function (e) { $("#previewImage").attr("src", e.target.result); } //Imagepath.files[0] is blob type reader.readAsDataURL(e.files[0]); } </script> </head> <body > <div> <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'> </div> <div> </div> <div> <img width="50%" id="previewImage"> </div> </body> </html> Um, just think ... there are billions of computers with a C: \ drive, since you expect html on the server to recognize your local C: \ localfile.jpg? Everything should be on the server.
Move the image file to the server. You need to rename the tag to <img src = "localfile.jpg"> Be sure to place it in the same directory where the document is, however, I recommend that you add the "images" directory and put the image in the image directory and write like this: <img src = "images / localfile.jpg"> on your document.