express 中的静态文件

Question

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

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

Answer 1

您需要使用 express 静态中间件。

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

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

Answer 2

首先，您需要确保了解使用 nodejs Web 服务器时，默认情况下不会提供来自服务器文件系统的任何文件。 None。这与其他环境中的某些其他 Web 服务器不同。

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

其次，Web 服务器本身没有相对路径。因为一个 http 请求是独立的，所以它没有任何关联。因此，它们仅适用于具有域或 IP 地址以及以 / 开头的路径的绝对路径。因此，请确保您意识到服务器上的所有 http 请求都将具有以 /.

开头的路径

第三，如果您尝试在浏览器中使用相对路径，在 HTML 标记或调用 fetch() 或任何其他需要 URL, 浏览器会看到 URL 是一个相对的 URL 并且它会从当前网页抓取路径并将该路径插入到你的 [=68= 的前面] 并将其转换为绝对路径（始终以 / 开头的路径）。

因此，在向服务器发出 http 请求之前，在 HTML 或 client-side Javascript 中使用相对路径将始终被浏览器转换为绝对路径。

can we access them using relative path, if not. Why?

所以...您几乎总是想在客户端上使用绝对路径。如果您不使用绝对路径，浏览器将使用其逻辑将其变成绝对路径，这可能是也可能不是您想要的路径。最好只在代码中指定您想要的实际绝对路径或 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.jpgURL路径，看看能不能在/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.jpgURL路径，看看能不能在/my-project/public/images中找到对应的文件，也就是说会寻找 /my-project/public/images/kitten.jpg。如果找到匹配的文件，它将自动提供。

express 中的静态文件

Static Files in express

path

node.js

express