Question

以下是该场景：我在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）

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文件的请求

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

4 个答案: