从UNC路径获取HTML图像源

Question

我需要将一张图片的源设置为网络上的一个位置。

这张图片位于machineName\mappedPath\abc.jpg。

尽管我只需要它在IE v9及以上版本中工作，但它无法在任何浏览器中加载。当我检查源代码中的位置时，它被设置为

<img src="\\machineName\mappedPath\abc.jpg">

当我在IE中右键单击图像占位符并查看属性时，我发现地址设置为。

file://machineName/mappedPath/abc.jpg

使用文件资源管理器打开这些路径中的任意一个都可以成功打开图片。

我尝试添加了IP地址。无法添加域名，因为它不在域中。

我还尝试将源设置为直接下方的路径。我读过一些地方说需要5个斜杠，但是没有任何变化。

<img src="file://\\machineName\mappedPath\abc.jpg">
<img src="file:////\\machineName\mappedPath\abc.jpg">
<img src="file://///\\machineName\mappedPath\abc.jpg">
<img src="file:////machineName/mappedPath/abc.jpg">
<img src="file://///machineName/mappedPath/abc.jpg">
<img src="\\machineName\mappedPath\abc.jpg">

我也尝试通过添加防火墙规则启用文件共享

https://blogs.msdn.microsoft.com/windows_azure_connect_team_blog/2011/01/20/windows-azure-connect-use-case-enable-file-sharing-on-windows-azure-vm/

顺便说一下，路径是否必须映射为网络驱动器，还是将其设置为网络共享就足够了？

虽然这不是权威来源，但我遇到过类似的信息https://jonlabelle.com/snippets/view/html/create-html-link-to-unc-path，但对我来说无效（在IE中）。

- user48408

---

应该使用 //myserver/mappedPath/abc.jpg 而不是 \\\myserver\mappedPath\abc.jpg，路径错误。 - S4NDM4N

将图像的src直接设置为file://machineName/mappedPath/abc.jpg或file:///\machineName\mappedPath\abc.jpg都没有帮助。 - user48408

它将<img> HTML 网络请求进行转换。 - S4NDM4N

抱歉，我没有理解上一条评论？ - user48408

IE7+有本地图像阻止功能...你的页面在受信任的区域吗？ - Sheng Jiang 蒋晟

Answer 1

我找到了这篇文章，它可能包含一些相关信息。

以下是Paul Zahra的答案：

FireFox无法显示网络图片，因此我创建了一个扩展HtmlHelper的MVC助手。

public static class ImageHelper
{
    /// <summary>Converts a photo to a base64 string.</summary>
    /// <param name="html">The extended HtmlHelper.</param>
    /// <param name="fileNameandPath">File path and name.</param>
    /// <returns>Returns a base64 string.</returns>
    public static MvcHtmlString PhotoBase64ImgSrc(this HtmlHelper html, string fileNameandPath)
    {
        var byteArray = File.ReadAllBytes(fileNameandPath);
        var base64 = Convert.ToBase64String(byteArray);

        return MvcHtmlString.Create(String.Format("data:image/gif;base64,{0}", base64));
    }
}

在MVC视图中使用如下：

using 
<img src="@Html.PhotoBase64ImgSrc(image)" height="60px" width="60px" alt="photo" />

在@Html.PhotoBase64ImgSrc（image）中，“image”表示纯网络UNC，例如：

//Photos/ebaebbed-92df-4867-afe8-0474ef8644eb.jpg

- RubbelDieKatz

---

这确实可行，对某些人来说肯定很方便，但由于我最多可能有5000张图片，所以这不是我能使用的解决方案，因为这将涉及到改变架构，以确保任何时候只有可见的图像被base64编码。 - user48408

也许你可以在用户滚动到图片时加载它们？ - RubbelDieKatz

我正在使用一个启用了延迟渲染的网格(datatables.net)。它能够负责仅加载可见图像。我可以想象通过切换到服务器端模式来实现这一点，但需要进行相当多的附加工作。这是一个可行的解决方案，但在着手之前，我更愿意看看是否可以以某种方式设置图像源。我只关心IE，在chrome和FF中采用这种方法存在问题，但在IE中设置图像源应该是可行的。 - user48408

Answer 2

你应该在以file://为前缀的路径中添加3个/：

<img src="file://///machineName/mappedPath/abc.jpg">

- yorammi

---

对我有效。同时，托管此HTML的站点URL需要在Windows Internet设置（IE设置）中处于内部安全区域。它适用于IE11和Edge Chromium。仍在努力使其在Chrome中运行，但会出现错误：`` - Adam

Answer 3

首先两个部分是协议标识符("file://")，然后是主机名（应该是从中访问文件的主机名。例如：localhost，这是默认值，因此可以留空！），然后是另一个斜杠，然后是UNC路径开始，这解释了最后两个斜杠，因为所有UNC路径都以两个斜杠开头。您尝试过以下内容吗？

<img src="file://localhost/\\machineName\mappedPath\abc.jpg">

- Syden

---

我确实尝试过，正如你所提到的，localhost部分是可选的，因此file:///\和file://localhost/\是等效的。我不会列出我尝试过的所有斜杠组合，但我尝试了很多。我现在认为这是一个安全问题，可能不可能实现，或者需要我在设置网络共享时进行一些配置。 - user48408

file:///\ 应该也可以工作。你是在尝试从防火墙外访问吗？另外，你考虑过设置一个 HTTP 服务器作为备选方案吗？这将统一你的图像路径语法。 - Syden

由于安全限制，根目录外的图片无法通过UNC的file://访问！ - floGalen

Answer 4

我在我的NAS上有一些图片。为了能够显示它们，我不得不进行一些严肃的研究，因为这很麻烦。似乎几乎没有什么信息。以下是我所做的：

• 我运行了一个IIS
• 首先，我必须创建一个虚拟目录如何在IIS 7.0中创建和配置虚拟目录
• 然后我有了这段代码：<img src="/virtualdir/picture.jpg" \>

我还尝试了每种可能的//\、////、以及IP等组合...但无法使其工作。

但实际上正在工作的是/是上传到\\IE-NAS-01\Data\Pictures。例如。这样我就可以使用它，因为一旦您设置了此类操作的权限，PHP就被允许这样做。

HTML没有获得超出wwwroot目录的权限，因此您无法访问服务器或网络上的任何文件。但是，一旦您设置了虚拟目录，它就是“wwwroot”的一部分。

我希望这会有所帮助。

干杯

编辑： 您可以在以下链接中找到更多信息： - Stack Overflow #13421784 - https://dev59.com/wXVC5IYBdhLWcg3wixw0#258380

使用PHP在根目录外显示图片：

<img src="http://path.to/this/file.php"/>

file.php:

<?php
header('Content-Type: image/jpeg');
readfile('path/to/image.jpeg');

这样你就可以避免限制了！干杯！

附注：内容类型：

header('Content-Type: image/gif');
header('Content-Type: image/jpeg');
header('Content-Type: image/png');

- floGalen

---

所以，正如你可以在那另外两个问题中了解到的那样，实际上有一个 PHP 的解决方案。但它不能仅使用 HTML 工作。要么使用虚拟目录，要么使用 PHP 来显示您网络上的图像。干杯 :) - floGalen

谢谢您的建议，但我必须考虑到可能有数百个映射/共享位置是事先不知道的，因此无法为每个位置创建虚拟目录。我相信在很多情况下这是一个好的解决方案。 - user48408

你可能可以运行某种.bat文件来创建那些VR。但是为了使用纯HTML显示这些图像，您不能使用file://作为src。此外，例如，如果您想链接到其中一张图片，则每个带有file://的链接在Chrome中都不起作用，因为这是出于安全目的而制作的！一种方法是使用php查找图片并以此方式显示它。然后，您可以避免服务器/HTML给出的限制。 - floGalen

嗨，Flo。我不需要它在Chrome中工作。我只需要它在IE中工作。这是一个内部应用程序，仅供少数用户使用。浏览器选择并不重要。我在网上看到了很多人想让这个在chrome/ff中工作，他们通过使用file://在IE中获得了成功。但是当我使用他们展示的相同方法时，我无法加载它们。例如，请参见接受的答案https://www.experts-exchange.com/questions/21830397/How-to-display-image-that-has-UNC-path.html。我以为它只能在旧版本的IE中使用，但我使用模拟器后得到了相同的结果。 - user48408

为了让UNC路径生效，我假设您需要打开服务器以供网络使用，并允许HTTP超出您的根目录。如何实现或是否可能我不知道。*.php的解决方案对您无效吗？ - floGalen