Question

如果html文件是本地的（在我的C盘上），它可以工作，但如果html文件在服务器上并且图像文件是本地的，则不行。那是为什么？

任何可能的解决方法？

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

C:不是公认的URI方案。请改为file://c|/...。

Answer 5

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

打开IIS
在默认网站下添加虚拟目录
- 虚拟路径将是您要在浏览器中浏览的内容。因此，如果您选择＆＃34; serverName / images ，您可以通过转到http://serverName/images
- 然后在C：驱动器上添加物理路径
为C：驱动器上的文件夹添加适当的权限，以便＆＃34; NETWORK SERVICE＆＃34;和＃34; IIS AppPool \ DefaultAppPool＆＃34;
刷新默认网站
你已经完成了。您现在可以浏览到该文件夹中的任何图像，方法是导航到http://yourServerName/whateverYourFolderNameIs/yourImage.jpg并在您的img src中使用该网址

希望这有助于某人

Answer 6

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

Answer 7

除了Newtang关于安全规则的观察之外，您如何知道任何查看您网页的人都会在c:\localfile.jpg获得正确的图片？你不能。即使你认为你可以，你也做不到。一方面，它预示着一个Windows环境。

Answer 8

我看到你想要做的两种可能性：

您希望在服务器上运行的网页能够在您最初设计的计算机上找到该文件吗？
您希望它从在页面上查看的电脑上获取吗？

选项1没有意义：）

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

Kyle Hudson告诉你你需要做什么，但这是如此基本，我觉得很难相信这就是你想要做的。

Answer 9

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

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

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

+SOURCE_CODE
          + MODULE_A
            -myfile.txt
          + MODULE_B
            -myfile.txt
          + MODULE_C   
            -myfile.txt

Answer 10

我尝试了很多技术，最后在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);
                            }

希望这会有所帮助

Answer 11

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

Answer 12

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

Answer 13

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

（显然，这不会对公共网站起作用，因为你可以轻松地在人们的计算机上运行cmd命令）

Answer 14

我们可以使用javascript＆＃39; 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>

Answer 15

以file:///开头并以filename结尾的应该可以正常工作

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

为什么我不能<img src="C:/localfile.jpg"/>？

15 个答案: