快速静态文件

Question

我在文档中看到，我们可以提供静态文件示例-- http://localhost:3000/images/kitten.jpg --但是即使它们位于本地机器上，我们是否可以使用相对路径访问它们呢？为什么？

我尝试使用相对路径，但这对我的图像无效，它显示为错误404

Answer 1

首先，您需要确保您认识到，对于nodejs web服务器，默认情况下不会从服务器文件系统提供任何文件。没有。这与其他环境中的其他web服务器不同。

因此，如果您想提供任何文件，那么您必须在您的Express服务器中有提供这些服务的路由或中间件。在Express框架中，express.static()通常用于用一行代码服务一组静态文件(全部位于一个目录或一个目录层次结构中)。

其次，web服务器本身没有相对路径。因为http请求是独立的，所以它没有什么可以相对的。因此，它们只在具有域或IP地址以及以/开头的路径的绝对路径中工作。因此，请确保您意识到服务器上的所有http请求都有一个以/开头的路径。

第三，如果试图在浏览器、HTML标记或调用fetch()或任何其他接受URL的API中使用相对路径，浏览器将看到该URL是相对URL，它将从当前网页抓取路径，并将该路径插入到URL的前面，并将其转换为绝对路径(始终以/开头的路径)。

因此，在您的HTML或客户端Javascript中使用相对路径时，浏览器总是会在向服务器发出http请求之前将其转换为绝对路径。

如果不是，

可以使用相对路径访问它们。为什么？

所以..。您几乎总是希望在客户端上使用绝对路径。如果不使用绝对路径，浏览器将使用其逻辑将其转换为绝对路径，这可能是您想要的路径，也可能不是您想要的路径。最好在代码或HTML中指定您想要的实际绝对路径。

因此，如果您的服务器上有一个目录层次结构，如下所示：

/my-project
    server
    public
        images
            kitten.jpg

然后，您可以在服务器上使用它：

app.use(express.static("/my-project/public"));

而且，在HTML中：

<img src="/images/kitten.jpg">

在本例中，express.static中间件将采用/images/kitten.jpg URL路径，并查看是否能够在/my-project/public中找到相应的文件，这意味着它将查找/my-project/public/images/kitten.jpg。如果它找到了匹配的文件，它将自动为它服务。

或者，要只允许访问images文件夹，可以这样做：

然后，您可以在服务器上使用它：

app.use(express.static("/my-project/public/images"));

而且，在HTML中：

<img src="/kitten.jpg">

在本例中，express.static中间件将采用/kitten.jpg URL路径，并查看是否能够在/my-project/public/images中找到相应的文件，这意味着它将查找/my-project/public/images/kitten.jpg。如果它找到了匹配的文件，它将自动为它服务。

Answer 2

您需要使用快速静态中间件。

app.use(express.static('public'));  

在这种情况下，Public是文件所在的文件夹。