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

Question

场景如下：我在 LAN 网络上有两台机器。其中之一充当网络服务器。当第二个客户端机器浏览器（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）

Answer 1

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

Answer 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"/>

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

Answer 3

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

Answer 4

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

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

Answer 5

可以这样解决：

.img-class
{
  background-image:url("../../resources/myImage.jpg");
  width: 100%;
  height: 100%;
}

<img  className='img-class'/>

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

How can I display an image from the local machine on a webpage

html

image