Question

我有一个Node.js后端，使用express.js作为我的中间件。我的后端代码：

var app = express();
app.use(express.static(path.join(__dirname, 'angular-src/src/assets'));

我的文件夹结构：

/ProjectName
 angular-src
   |__ src
      |__ app
      |__ assets
          |__ css
              |__ style.css
          |__ fonts
          |__ images
              |__ auth
                 |__ login_1.jpg
 app.js

在style.css文件中，它正在使用：

background-image: url("../images/auth/login_1.jpg");

我收到此login_1.jpg文件的404错误，我认为这意味着我的静态文件没有被提供。关于我做错了什么的任何想法？

Answer 1

将网页中的网址更改为以/开头：

background-image: url("/images/auth/login_1.jpg");

您不希望该URL与浏览器在您使用..启动时所假定的页面路径相对。相反，您希望它以/开头，以便浏览器不会弄乱路径并直接从您的服务器请求该路径。然后express.static()将使用此路径/ProjectName/angular-src/src/assets作为父路径，然后将请求的路径附加到其上以查找匹配的文件。

此外，这假设__dirname中使用的path.join(__dirname, 'angular-src/src/assets')为/ProjectName。如果情况并非如此，那么您需要修复您发送到express.static()的路径的停止部分。

请记住，当你这样做时：

app.use(express.static(path.join(__dirname, 'angular-src/src/assets'));

您明确表示您希望它将该特定目录用作根目录，并且对于浏览器请求的任何URL，Express应该查找从该根开始的匹配文件。因此，如果浏览器请求/hello.html，则Express应在该静态目录中查找名为hello.html的文件，如果找到则为其提供服务。如果浏览器请求/images/auth/login_1.jpg，则Express应该将其置于根目录上并将/images/auth/login_1.jpg附加到其上，并查看该文件是否存在。如果是这样，请提供服务。

还要记住，浏览器将始终请求绝对路径。因此，如果您在HTML页面中放置了相对链接，那么浏览器将组合当前网页URL的路径以生成绝对URL。

您还可以随时使用Chrome调试器中的网络标签查看浏览器请求的确切网址。如果要在服务器上看到相同的信息，可以将此pass-thru中间件作为第一个路由之一（在express.static()中间件之前）插入：

app.use(function(req, res, next) {
    console.log(req.originalUrl);
    next();
});

如何使用Node / express提供静态文件？

1 个答案: