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 a server and the image file is local. Why is that?

Any possible workarounds?

411454 次浏览
小开

C:不是可识别的 URI 方案。请尝试使用 file://c|/...。

小开

浏览器不允许访问本地文件系统，除非您正在访问本地 html 页面。你得把照片上传到某个地方。如果它与 html 文件在同一个目录中，那么可以使用 <img src="localfile.jpg"/>

小开

您是否应该使用“ file://C:/localfile.jpg”而不是“ C:/localfile.jpg”？

小开
最佳答案

如果客户端可以请求本地文件系统文件，然后使用 JavaScript 查找其中的内容，那么这将是一个安全漏洞。

解决这个问题的唯一方法是在浏览器中构建一个扩展。Firefox 扩展和 IE 扩展可以访问本地资源。Chrome 的限制要严格得多。

小开

除了纽唐关于安全规则的观察之外，你怎么知道任何浏览你的页面的人在 c:\localfile.jpg都会有正确的图片？你不能。即使你认为你可以，你也不能。首先，它预先假设了一个窗口环境。

小开

您还需要上传图像，然后链接到服务器上的图像。

小开

我看到了你想做的两种可能性:

  1. 你想让你的网页在服务器上运行，在你最初设计的计算机上找到文件？

  2. 你想让它从正在查看页面的电脑上获取它吗？

选项1就是没有意义:)

选项2将是一个安全漏洞，浏览器禁止网页(从网络服务)加载内容的观众的机器。

凯尔 · 哈德森告诉了你该做什么但这太基本了我很难相信这就是你想做的全部。

小开

让用户选择图像怎么样？使用输入: 文件标签，然后在他们选择的图像，显示在客户端网页？这在大多数情况下是可行的。现在我试图让它工作的 IE，但与所有的微软产品，它是一个集群 fork ()。

小开

IE9: 如果你想让用户在发布图片到服务器之前看一眼图片: 用户应该添加网站到“信任的网站名单”。

小开

如果你使用谷歌浏览器，你可以这样使用

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

But if you use Mozila Firefox the you need to add "file " ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
小开

老实说，最简单的方法是将文件托管添加到服务器。

  • 打开 IIS

  • 在默认网站下添加虚拟目录

    • virtual path will be what you want to browse to in the browser. So if you choose "ServerName/images you will be able to browse to it by going to http://serverName/images
    • 然后在 C: 驱动器上添加物理路径

  • 为“ NETWORKSERVICE”和“ IIS AppPool DefaultAppPool”的 C: 驱动器上的文件夹添加适当的权限

  • 刷新默认网站

  • 你完蛋了。现在，通过导航到 http://yourServerName/whateverYourFolderNameIs/yourImage.jpg并在 img src 中使用该 URL，可以浏览到该文件夹中的任何图像

希望这对谁有帮助

小开

如果您只是为自己或某些客户机部署本地网站，那么可以通过在网站根目录中以管理员的身份在 cmd 中运行 mklink /D MyImages "C:/MyImages"来解决这个问题。然后在 html 中，执行 <img src="MyImages/whatever.jpg">操作，由 mklink 建立的符号链接将把相对 src 链接与 C 驱动器上的链接连接起来。它为我解决了这个问题，所以它可以帮助其他人来到这个问题。

(显然这对公共网站不起作用，因为你不能轻易地在人们的电脑上运行 cmd 命令)

小开

我们可以使用 javascript 的 < em > FileReader () 和它的 ReadAsDataURL (fileContent) 函数来显示本地驱动器/文件夹文件。 将更改事件绑定到图像，然后调用 javascript 的 showview 函数。 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>
&nbsp;
</div>
<div>
<img width="50%" id="previewImage">
</div>
</body>
</html>
小开

我尝试了很多技术，最终在 C # Side 和 JS Side 中找到了一个。 不能为 src 属性提供物理路径，但可以将 base64字符串作为 src 提供给 Img 标记。 让我们看看下面的 C # 代码示例。

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

C # 代码

 if (File.Exists(filepath)
{
byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
string base64ImageRepresentation = Convert.ToBase64String(imageArray);
var val = $"data: image/png; base64,{base64ImageRepresentation}";
imgEvid.Attributes.Add("src", val);
}

希望这个能帮上忙

小开

以 file:///开始，以 filename结束应该可以:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">

提交答案