如何在网页上显示来自本地计算机的图像答案

【问题标题】：How can I display an image from the local machine on a webpage如何在网页上显示来自本地计算机的图像
【发布时间】：2015-03-27 11:34:32
【问题描述】：

以下是场景：我在 LAN 网络上有两台机器。其中之一是充当 Web 服务器。第二个，客户端机器浏览器（Firefox）向服务器发出请求时，它发送以下html

<!DOCTYPE HTML>
<html>
<body>
<img src="C:\Users\General\Desktop\map1.jpg" align="middle">
</body>
</html>

但是图像不显示。我尝试了以下 img 标签的变体：

<img src="C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="file:///C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg" align="middle">

有趣的是，如果我查看页面源并将 html 内容保存到本地文件并在浏览器中打开它就可以了。完全相同的 html 代码在从服务器获取时不起作用，但在本地计算机上打开时起作用。

请注意，我正在尝试从客户端计算机加载图像，因为在我的场景中无法将图像存储在服务器计算机上。（服务器实际上是一个没有 SD 卡的 Arduino Mega）

【问题讨论】：

所以你的图片是在本地服务器上吧？
图像在从服务器机器发出http请求的客户端机器上
将驱动器映射到服务器并将其映射名称放入，因此在服务器的Windows资源管理器中，单击Map Network Drive并将客户端的C:映射到服务器的E:，然后输入@ HTML 中的 987654327@。
不错.. 但服务器不是 Windows 机器。这是一个 Arduino .. :(
这能回答你的问题吗？ How to show local picture in web page?

标签： html image

【解决方案1】：

出于安全考虑，在最新的浏览器中，本地文件的链接 (file:///) 不会打开。在您的情况下，浏览器不会显示驻留在硬盘文件上的图像。这个原因也解释了为什么当您在本地保存页面时它会起作用。

【讨论】：

我们该如何解决？
修复它？？？你的意思是改变你认为它坏了的浏览器行为？不，不是，不需要“修复”任何东西

【解决方案2】：

首先，您需要添加runat="server" 属性。

如果这还不够，那么：

你应该改变

<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg"/>

类似

<img src="http://localhost/General/Desktop/map1.jpg"/>

甚至更好

<img src="~/General/Desktop/map1.jpg"/>

它以应用程序的根目录为目标（您需要将图像移动到该目录中）

【讨论】：

没有任何改变

【解决方案3】：

html 页面无法从客户端主机请求图像。它必须存储在服务器上，或另一个远程位置。

【讨论】：

【解决方案4】：

如果您使用的是 Arduino，您可以：

使用嵌入的 CSS 和图像。结果，您将通过一个浏览器调用获得整个页面
添加额外的逻辑来处理浏览器从 Arduino 的 SD 卡文件系统中获取 css 和 jpg 文件的请求

【讨论】：