Express静态服务提供的路径错误

Question

我正在使用express.js并构建一些基本功能，但是如果URL距离根目录超过一个目录，则无法从正确的位置提供express静态服务。请参考下面的例子。

我正在使用文档中常用的静态文件服务方法。

app.use(express.static(__dirname + '/public'));

我已经设置了几个路由，例如：

app.get('/signup', function(req, res) {
    res.render('signup.ejs');
});

在链的末尾设置一个404捕获。

app.get('*', function(req, res){
    res.status(404).render('404');
});

如果我访问在路由中定义好的页面，如localhost:3000或localhost:3000/login，则一切正常。即使我访问了一个未定义的路由localhost:3000/foo，也会正确地呈现404，并显示所有图片。

然而，如果我进一步操作，例如localhost:3000/login/foo，则所有图片都会丢失，并且浏览器控制台会出现以下地址的错误： http://localhost:3000/login/img/site-brand.png 同样的问题也会出现在包含多个目录的路由上。

我理解Express官网上的文档是无论什么调用静态图像的方式，它都会从根目录下的public目录中提供服务，该目录包含js、img和css目录。

我的问题是，我哪里理解错了？如何让Express始终相对于根目录提供服务？

- Glenn Holland

Answer 1

我写下了整个问题，然后意识到当我在我的 .ejs 文件中设置 src="" 标签时，我使用的是相对路径而不是绝对路径。为了不删除问题，我决定回答它并发布给其他人。

因此，应该使用 src="/img/my-image.png"，而不是 src="img/my-image.png"。前导斜杠表示请求相对于根目录，而不是发出请求的路径。

这是基本的网页开发内容。我应该第一时间看到它，但现在已经很晚了，而且我正在将大脑塞满新框架，这反过来又挤压了我小脑袋里的更琐碎的东西。

- Glenn Holland

---

好的，我花了几个小时来修复这个问题，但原来只是一个小问题。非常感谢。 - Muhammad Haseeb