无论路由如何,如何强制 Express JS 从同一目录提供文件?

How to force Express JS to serve files from the same directory regardless of route?

我正在编写一个使用名为 Handlebars 的模板引擎的快速应用程序。它提供的 html 文件包含指向我的根目录中某些位置的图像。这适用于表面级路由,例如“http://localhost:5000/image”或“http://localhost:5000/login”。然而,当我转到更深层次的路由,例如“http://localhost:5000/image/1”时,所有图像都指向我的根目录中不存在的“/image”文件夹。此处显示的屏幕截图:

如何强制我的页面只指向我的根目录,而不管用户在哪个路径?我不能简单地更改 html 文件中的 src,因为我使用的模板引擎无论用户在哪个页面上都提供相同的横幅图像。

这是我的代码

您似乎在模板中使用了相对路径。由于您使用 express.static 来提供根目录中的文件,请尝试将图像路径更改为绝对路径(以 / 开头):

<img src="/assets/path/to/your-image.png">

你是从这个方向接近的。

目前您在 HTML 中使用相对路径。 <img src="assets/etc…

这些是通过获取基础 URL(通常是当前 HTML 文档的路径)、删除片段 ID、查询字符串以及最后一个 / 之后的所有内容来解决的然后附加相对路径。

因此解析路径将根据您正在查看的 HTML 文档的 URL 而改变。


可以做您要求的并编写代码以便:

/assets/foo
/something/assets/foo
/something-else/assets/foo
/something/something/assets/foo

都给你同样的资源。

但是:

  • 这会破坏该资源的缓存
  • 写起来会很痛苦
  • 您可能会在搜索引擎中受到重复内容的处罚

所以不要那样做


相反,为资源选择 URL 并更改 HTML,这样您总是要求相同的 URL。

使用以 /.

开头的绝对路径

这些以与相对 URLs 类似的方式解析,但不是在最后一个 / 之后剥离所有内容,而是在主机名(和可选端口号)之后剥离所有内容。

<img src="/assets/etc…

为静态文件指定一个单独的目录。然后始终将它们称为绝对路径。