如何在 Express 应用程序中为我的静态添加正确的方法？答案

【问题标题】：How to add correct way to my static in Express app?如何在 Express 应用程序中为我的静态添加正确的方法？
【发布时间】：2017-02-27 22:37:52
【问题描述】：

我的 app.js 文件中的重要提示：

    var express = require('express');
    var profile = require('./controllers/profile-controller'); //require my controller (profile-controller.js)
    app.use(express.static(path.join(__dirname, 'public')));
    app.use('/user', profile);

当我转到“mysite.com/user”时，它工作正常，但是当我转到“mysite.com/user/user1”时，我的 CSS 和图像无法加载。这是我的控制器文件：

var express = require('express');
var router = express.Router();

// route for www.mysite.com/user
router.get('/', function(req, res, next) {
    res.render('profile',{ title: 'Profile' });

});
// route for www.mysite.com/user/user1 
router.get('/:id([A-Za-z0-9_]{5})', function(req, res, next) {
    var id = req.params.id;
    res.render('profile',{ title: 'Profile' });
});

module.exports = router;

控制台告诉我：

那么为什么我的两个页面都有相同的路由，但其中一个运行良好，而第二个为静态文件提供 404？

【问题讨论】：

您可以在附加的图像上看到它。当您转到/user 时，它会从/img/... 加载图像。但是当你转到/user/user1 时，图像是从/user/img/... 加载的。检查您的资源是如何被引用的。
@ex0dm3nt 但如何解决？我正在尝试不同的方法，但无法解决它...
能否请您也添加该profile 模板的html 文件？您是否尝试过输入整个路径，例如 res.render('/templates/profile',{ title: 'Profile' }); 或该文件的任何文件路径？
@ex0dm3nt 这里是 github 仓库：github.com/BimBoss/sample-example。这是一个简单的快速生成器应用程序，但我将图像“wow.png”添加到图像文件夹和另一条路由到 routes/users.js。因此，如果您运行（npm start）服务器并转到 localhost:3000 一切正常，如果您转到 localhost:3000/users，它仍然可以，但是如果您转到 localhost;3000/users/username，图像路径会损坏并且img status 是 404 .... 就像在我自己的项目中一样...
您能再尝试一件事吗？在index.hbs 文件中，而不是src="images/wow.png" 放入src="/public/images/wow.png" 或src="/images/wow.png"。

标签： node.js express node-modules

【解决方案1】：

在您的index.hbs 文件中，您有src="images/wow.png"，这是您的图像资源的相对路径。因此，当您转到/user/user1 时，它只是将/user 添加到您的图像资源路径中。

尝试使用src="/public/images/wow.png" 或src="/images/wow.png"，而不是src="images/wow.png"。

【讨论】：