为什么我不能做<img src =“ C：/localfile.jpg”>？

96

如果html文件是本地文件（在我的C驱动器上），它将起作用，但是如果html文件在服务器上并且图像文件是本地文件，则无法使用。这是为什么？

任何可能的解决方法？

javascript  html  filesystems  src 
— 彼得五世
source
3
请问您为什么要这样做？
— 鲍里斯·卡伦斯
2
@BorisCallens例如，当我在自己的计算机上拥有新映像并且不想完成上传到暂存的整个过程时，我可能想在暂存网站上测试映像的更改。似乎唯一的方法是在开发环境中更改映像，而不是分阶段进行。
— xji 2015年
这也是对您技术上不太熟练的熟人开个玩笑的好方法，使他们认为您已经入侵了网站。
— 0112
快速执行此操作的另一种方法是上传文件，例如说Google驱动器或其他内容，然后复制图像网址并将其粘贴到内部src=""
— 0112
只需在您的计算机上使用开发Web服务器即可。如今，这很容易，因为甚至PHP都内置了一个
— 。– MauganRa

Answers:

64

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

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

— 比约恩
source
1
仍然可以使Flash设法访问用户选择的任何内容，即使在Chrome中也是如此
— Javier 2010年
1
对此表示支持，因为它回答了原因并给出了解决方法。我可能会做的（我知道我提供的背景并不多）是创建一个本地Web服务器来提供本地图像。这样浏览器可以显示它们。
— PeterV
1
Flash只能使用适当的策略文件来访问本地资源，否则它将进入本地模式并以其他方式对其进行限制。
— 比约恩
2
这种偏执的安全仅仅是一种干扰。您可以使用带有<input type = file>字段的表单使用AJAX将用户文件上传到服务器，但是如果您希望对用户友好并显示预览，则必须进行往返并将文件上传到服务器优先。与本地生成预览图像相比，它的安全性如何？
— MKaama
2
为了向用户显示一个不错的预览，您必须先对服务器进行一次往返旅行。使用AJAX是可能的。与本地生成预览图像相比，首先将文件上传到服务器的安全性如何？偏执的安全只会造成干扰，而不能解决任何问题。
— MKaama
31

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

— 安德烈·杜罗
source
27

除非您正在访问本地html页面，否则不允许浏览器访问本地文件系统。您必须将图像上传到某个地方。如果它与html文件位于同一目录中，则可以使用<img src="localfile.jpg"/>

— 新塘
source
我试图使用绝对路径“ /localfile.jpg”实现相同目的，但似乎浏览器将其像“网络图像”那样使用，但找不到。谢谢！
— jmojico
6

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

  • 打开IIS

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

    • 虚拟路径将是您要在浏览器中浏览的内容。因此，如果您选择“ serverName / images”，则可以通过转到http：// serverName / images浏览到它。
    • 然后在C：驱动器上添加物理路径

  • 在“网络服务”和“ IIS AppPool \ DefaultAppPool”的C：驱动器上的文件夹中添加适当的权限

  • 刷新默认网站

  • 这样就完成了。现在，您可以通过导航到http：//yourServerName/whateverYourFolderNameIs/yourImage.jpg浏览到该文件夹​​中的任何图像，并在img src中使用该URL。

希望这可以帮助某人

— 格式
source
3

IE 9：如果您希望用户在将图像发布到服务器之前先查看图像：用户应将网站添加到“受信任的网站列表”。

— 联合4和平
source
3

我们可以使用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>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>
— 拉文德拉（Ravindra Vairagi）
source
Chrome在控制台“不允许加载本地资源”中引发错误。
— raosaeedali
1
@raosaeedali对不起，您的回复很晚。如果我们想将本地驱动器中的图像直接显示到HTML页面的img标签中，则需要给出相对路径。另一个解决方案是我们从输入类型文件获取文件路径，并将文件源分配给img标签，为此我更新了代码。
— 拉文德拉·瓦伊拉吉
@RavindraVairagi是否可以显示图像而不在资源管理器中选择文件？我尝试使用您的脚本，但没有得到“不允许加载本地资源”的错误，但我希望找到一种直接打印图像的方法（如果存在）...
— Bandoleras
2

除了关于安全规则的Newtang观察之外，您如何知道查看您页面的任何人在处都有正确的图像c:\localfile.jpg？你不能 即使您认为可以，也不能。它以Windows环境为前提。

— 杰克·凯利
source
除非可以。我知道这个问题的背景还不多：)但是在这种情况下，我们实际上可以知道。
— PeterV
5
如果他只打算在一个办公室中有10个用户，并且每个用户都具有Windows环境并且在c：\ localfile.jpg上具有正确的图像，该怎么办。为此，他将不仅能够知道正确的图像，而且还能对其进行控制。
— 纳斯卡2014年
这个问题是有效的，因为他的要求是在Windows环境中服务，因此受众非常有限。例如，当我设计基于Arduino的Web服务器时，我遇到了相同的问题，其中唯一的客户端是与Arduino服务器在同一LAN上的Windows PC。Arduino向客户端提供图像的速度太慢，因此我需要将图像存储在客户端计算机本身上。
— PrashanD
1

我看到您尝试做的两种可能性：

  1. 您要在服务器上运行的网页在最初设计它的计算机上找到文件吗？

  2. 您要它从页面上正在查看的PC中获取它吗？

选项1只是没有意义:)

选项2是一个安全漏洞，浏览器禁止网页（从网络提供）将内容加载到查看器的计算机上。

凯尔·哈德森（Kyle Hudson）告诉您您需要做的事情，但这太基础了，我很难相信这就是您想做的事情。

— 胡安·门德斯
source
1

如果您使用Google chrome浏览器，则可以这样使用

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

但是，如果您使用Mozila Firefox，则需要添加“ file”文件。

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
— Sachindra N. Pandey
source
3
那不在Chrome中对我有用，但是在IE中确实有用？
— 章鱼
0

让图像成为用户选择的东西怎么样？使用input：file标签，然后在他们选择图像后，在客户端网页上显示它？这对于大多数事情都是可行的。现在，我正在尝试使其适用于IE，但与所有Microsoft产品一样，它是一个集群fork（）。

— 堕落者
source
0

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

（显然，这对公共网站不起作用，因为您不能在人的计算机上轻松运行cmd命令）

— takanuva15
source
0

我尝试了很多技术，最后在C＃端和JS端找到了一种。您不能为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);
                            }

希望这会有所帮助

— Naveed Khan
source
0

开头file:///和结尾filename应工作：

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
— 史蒂夫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.