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



我将图像作为png文件存储在本地服务器上,只有文件名保存到DB中。当向客户端渲染图像时,我将图像的相对路径与数据库中的文件名组合起来,并像这样传递:

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

但它不起作用。作为绝望的最后一次尝试,我甚至将png文件本身移到了客户端脚本的根目录中,但它仍然没有产生任何结果。

是什么导致了这个问题?

默认情况下,node.js和Express不提供任何文件。因此,你不能给浏览器一个到服务器硬盘上某个位置的路径,并期望网络服务器发送文件。它并没有做到这一点(不像熟悉Apache的人所期望的那样(。

您的服务器上需要一个指向公共目录的路由。有几种方法可以做到这一点,但这里有一种:

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

然后,在您的服务器上,您将使用express.static()中间件创建一个路由,该路由查找以/public开头的URL,并提供硬盘驱动器上公共目录中与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()不允许在路径中使用..,因此请求无法从指定的目录中传出。

最新更新