节点快递服务器不提供图片文件夹

当我在生产服务器上运行我的捆绑React应用程序时,它找不到我的图像文件,我不知道为什么。 我相当确定这是有关我的节点快递configuration和/或我的.ejs模板文件。

server.js

 var express = require('express') var app = express(); const path = require('path'); app.use('/static', express.static(__dirname + '/static')); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.get('*', function (req, res) { res.render("index"); }); const port = process.env.PORT || 3000; const env = process.env.NODE_ENV || 'production'; app.listen(port, err => { if (err) { return console.error(err); } console.info(`Server running on http://localhost:${port} [${env}]`); }); 

index.ejs

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Production Server</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"> <link rel="stylesheet" href="../static/css/main.css"> </head> <body> <div id="root"></div> <script src="../static/js/bundle.js"></script> </body> </html> 

我的CSS样式表在模板文件中被调用,并且所有的JS被捆绑到脚本标签中引用的bundle.js中。 我不知道如何让我的应用程序识别/img文件夹,但目前它不。

这是我的文件结构:

 - static - css - main.css - js - bundle.js - img (contains all image files) 

但是,当我运行该应用程序时,我在Chrome控制台中打开“来源”,则/ img文件未被投放。

我认为这一行表明,快递服务/static文件夹中的一切…

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

…三个文件中只有两个正在服务。

如果有人能告诉我我的设置出了什么问题,我会大加赞赏。

提前致谢。

DevTools中的source标签只会显示浏览器在index.ejs中使用的内容,只能使用.js和.css文件

在Index.ejs中你正在加载

<script src="../static/js/bundle.js"></script><link rel="stylesheet" href="../static/css/main.css">

这意味着中间件app.use('/static', express.static(__dirname + '/static')); 会检查/js/bundle.js/css/main.css是否存在于静态文件夹中,如果是的话,它会提供服务,如果没有,那么会给文件或文件夹找不到。

这意味着无论您将从index.ejs中的静态文件夹加载,还是仅在index.ejs中使用,内容和文件将出现在“源”选项卡中。 尝试从静态文件夹添加index.ejs中的图像,然后查看源选项卡

或删除<script src="../static/js/bundle.js"></script>并查看源代码标签,您将不会看到JS文件夹,因为它没有被index.ejs使用

总是重新加载服务器