无法加载静态 css

Question

几个月前开始编码，运行遇到了一个问题，我在网上找不到任何东西。我有以下 http 请求

app.get("/courses", async (req, res) => {
  const courses = await Course.find({});
  res.render("courses/index", { courses, topic: "Μαθήματα" });
});

app.get("/about", (req, res) => {
  res.render("courses/about", { topic: "Πληροφορίες" });
});

app.get("/courses/:id", async (req, res) => {
  const { id } = req.params;
  const course = await Course.findById(id);
  return res.render("courses/show", { course, topic: course.title });
});

所有呈现的模板都在同一个文件夹中，但是当我尝试从 /courses/:id 呈现某些内容时，它找不到合适的 css 和 js 文件。仅当我使用 /courses/something else 时才会出现此问题。如果我只用 /:id 尝试同样的事情，它加载正常，否则我得到 these errors.

我的包含文件中的路径是：

<link rel="stylesheet" href="static/stylesheets/footer.css" />
<link rel="stylesheet" href="static/stylesheets/navbar.css" />
<link rel="stylesheet" href="static/stylesheets/coursesIndex.css" />

我尝试了很多不同的可能路径，但都没有成功。谢谢你的时间

Answer 1

尝试在静态路径前加上前缀 /，如下所示：

<link rel="stylesheet" href="/static/stylesheets/footer.css" />
<link rel="stylesheet" href="/static/stylesheets/navbar.css" />
<link rel="stylesheet" href="/static/stylesheets/coursesIndex.css" />

它可能会起作用，因为其他 2 条路由是根级路由。因此，在呈现时，浏览器会在根目录中查找 static/stylesheets/...。所以，它奏效了。但是，当您在 /courses/:id 路径上呈现相同内容时，浏览器会在 /courses/:id 中查找 static/stylesheets/...（例如，实际会像 /courses/1）。该目录（示例中的 1）在您的根目录中不存在。

因此，如果您使用绝对路径（这些是以 / 开头的路径），浏览器将始终从您网站的 root 中查找它们。所以，这会起作用。

无法加载静态 css

Cannot load static css

css

ejs

node.js

express