image src 属性不显示本地存储的图像

Question

我将图像作为 png 文件存储在本地服务器上，并且仅将文件名保存到数据库中。当向客户端渲染图像时，我将图像的相对路径与数据库中的文件名结合起来，如下所示：<img src='../../public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>但这不起作用。作为绝望中的最后一次尝试，我什至将 png 文件本身移动到客户端脚本的根目录，但它仍然没有产生任何结果。是什么导致了这个问题？

Answer 1

默认情况下，node.js 和 Express 不提供任何文件。因此，您不能为浏览器提供服务器硬盘上某个位置的路径并期望 Web 服务器发送文件。它并没有这样做（与熟悉 Apache 的人可能期望的不同）。

您的服务器上需要有一条指向公共目录的路由。有多种方法可以做到这一点，但这是一种：

<img src='/public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>

然后，在您的服务器上，您将使用express.static()中间件创建一个路由，该路由查找以以下开头的 URL /public，并将提供硬盘驱动器上与 URL 路径匹配的公共目录中的文件：

app.use("/public", express.static("../../public"));

您传递到的路径express.static()需要指向本地硬盘上的公共目录。您没有透露您的本地文件结构，因此我无法确切地告诉您它应该是什么。上面的示例将相对于程序启动时的当前工作目录。从模块目录中自己构建路径可能更常见。因此，如果该public目录比模块目录高两级，您可以这样做：

app.use("/public", express.static(path.join(__dirname, "../../public")));

然后，它会更具体地与模块的目录相关，而不依赖于当前工作目录，当前工作目录可以通过代码或程序的启动方式进行更改。

当然，您也可以使用完全限定路径：

app.use("/public", express.static(path.join("/someVol/users/me/myProject/public")));

---

请记住，express.static()中间件会打开您指向的整个目录树以供公共访问，因此您必须绝对确保其中只有公共内容。默认情况下，express.static()不允许..进入路径，因此请求无法离开您指定的目录。