Javascript 为什么我不能做 <img src="C:/localfile.jpg">？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4090712/
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
Why can't I do <img src="C:/localfile.jpg">?
提问by PeterV
It works if the html file is local (on my C drive), but not if the html file is on a server and the image file is local. Why is that?
如果 html 文件是本地的（在我的 C 驱动器上），它会起作用，但如果 html 文件在服务器上并且图像文件是本地的，则它不起作用。这是为什么？
Any possible workarounds?
任何可能的解决方法？
采纳答案by Bjorn
It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what's in them.
如果客户端可以请求本地文件系统文件，然后使用 JavaScript 找出其中的内容，这将是一个安全漏洞。
The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.
解决这个问题的唯一方法是在浏览器中构建一个扩展。Firefox 扩展和 IE 扩展可以访问本地资源。Chrome 的限制要多得多。
回答by AndreDurao
shouldn't you use "file://C:/localfile.jpg" instead of "C:/localfile.jpg"?
你不应该使用“file://C:/localfile.jpg”而不是“C:/localfile.jpg”吗？
回答by Newtang
Browsers aren't allowed to access the local file system unless you're accessing a local html page. You have to upload the image somewhere. If it's in the same directory as the html file, then you can use <img src="localfile.jpg"/>
除非您访问本地 html 页面，否则不允许浏览器访问本地文件系统。您必须将图像上传到某个地方。如果它与html文件在同一目录中，那么您可以使用<img src="localfile.jpg"/>
回答by Ignacio Vazquez-Abrams
C:is not a recognized URI scheme. Try file://c|/...instead.
C:不是公认的 URI 方案。试试吧file://c|/...。
回答by foremaro
Honestly the easiest way was to add file hosting to the server.
老实说，最简单的方法是将文件托管添加到服务器。
Open IIS
Add a Virtual Directory under Default Web Site
- virtual path will be what you want to browse to in the browser. So if you choose "serverName/imagesyou will be able to browse to it by going to http://serverName/images
- Then add the physical path on the C: drive
Add the appropriate permissions to the folder on the C: drive for "NETWORK SERVICE" and "IIS AppPool\DefaultAppPool"
Refresh Default Web Site
And you're done. You can now browse to any image in that folder by navigating to http://yourServerName/whateverYourFolderNameIs/yourImage.jpgand use that url in your img src
打开 IIS
在默认网站下添加虚拟目录
- 虚拟路径将是您要在浏览器中浏览的内容。因此，如果您选择“ serverName/images ，您将能够通过访问http://serverName/images来浏览它
- 然后在C:盘添加物理路径
为“NETWORK SERVICE”和“IIS AppPool\DefaultAppPool”的C盘文件夹添加适当的权限
刷新默认网站
你已经完成了。您现在可以通过导航到http://yourServerName/whateverYourFolderNameIs/yourImage.jpg并在 img src 中使用该 url来浏览到该文件夹中的任何图像
Hope this helps someone
希望这有助于某人
回答by United4Peace
IE 9 : If you want that the user takes a look at image before he posts it to the server : The user should ADD the website to "trusted Website list".
IE 9：如果您希望用户在将图像发布到服务器之前查看图像：用户应该将网站添加到“受信任的网站列表”。
回答by Ravindra Vairagi
we can use javascript's FileReader()and it's readAsDataURL(fileContent)function to show local drive/folder file. Bind change event to image then call javascript's showpreview function. Try this -
我们可以使用 javascript 的FileReader()和它的readAsDataURL(fileContent)函数来显示本地驱动器/文件夹文件。将更改事件绑定到图像，然后调用 javascript 的 showpreview 函数。尝试这个 -
<!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>
回答by Hyman Kelly
Newtang's observation about the security rules aside, how are you going to know that anyone who views your page will have the correct images at c:\localfile.jpg? You can't. Even if you think you can, you can't. It presupposes a windows environment, for one thing.
抛开 Newtang 对安全规则的观察，您怎么知道查看您页面的任何人都会在c:\localfile.jpg. 你不能。即使你认为你能，你也不能。一方面，它以 Windows 环境为前提。
回答by Juan Mendes
I see two possibilities for what you are trying to do:
我看到您尝试做的事情有两种可能性：
You want your webpage, running on a server, to find the file on the computer that you originally designed it?
You want it to fetch it from the pc that is viewing at the page?
您想让在服务器上运行的网页在您最初设计的计算机上找到文件吗？
您希望它从在页面上查看的 pc 中获取它吗？
Option 1 just doesn't make sense :)
选项 1 只是没有意义:)
Option 2 would be a security hole, the browser prohibits a web page (served from the web) from loading content on the viewer's machine.
选项 2 是一个安全漏洞，浏览器禁止网页（从网络提供）在查看者的机器上加载内容。
Kyle Hudson told you what you need to do, but that is so basic that I find it hard to believe this is all you want to do.
凯尔哈德森告诉你你需要做什么，但这是非常基本的，我发现很难相信这就是你想要做的。
回答by Sachindra N. Pandey
if you use Google chrome browser you can use like this
如果你使用谷歌浏览器，你可以像这样使用
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
But if you use Mozila Firefox the you need to add "file " ex.
但是，如果您使用 Mozila Firefox，则需要添加“文件”例如。
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
