使用express.js和jade处理路由和文件

Question

当我转到1级深度的路由时，在访问node.js Web应用程序中的某些图像文件时遇到了一些麻烦。 这是因为css会寻找将1级的资产添加到指定路径的开头的资产。

例如，在我的布局中，我有一个名为main.css的css文件的链接。 main.css有一个名为.icon{background:url('../imgs/ok.png');}当我转到登录页面app.get('/login', routes.login) ，该文件是/imgs/ok.png ，此处图像加载到UI中。 当我尝试访问具有一个附加级别app.get('/events/:id', routes.loadEvent)的以下路由时，会发生问题。 该额外级别将添加到css url /events/imgs/ok.png ，并且图像不再加载到UI中。

如果有人可以帮助我找出解决此问题的方法，我将不胜感激。

提前致谢

这是我的app.js文件

module.exports = function (Events, db) {
    var express = require('express');
    var validator = require('validator');
    var MongoStore = require('connect-mongo')(express);
    var passport = require('./auth');
    var routes = require('./routes')(Events);
    var path = require('path'); 
    var app = express();

    // all environments
    app.set('port', process.env.PORT || 4000);
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.cookieParser());
    app.use(express.session({
        secret: 'keyboard cat',
        store: new MongoStore({mongoose_connection: db})
    }))
    app.use(passport.initialize());
    app.use(passport.session());
    app.use(express.bodyParser({uploadDir:'./uploads'}));
    app.use(express.methodOverride());
    app.use(function (req, res, next) {
        res.set('X-Powered-By', 'TShare');
        next();
    });
    app.use(app.router);
    app.use(express.static(path.join(__dirname, './public')));
    app.use("/event", express.static(path.join(__dirname, './public')));

    // development only
    if ('development' == app.get('env')) {
        app.use(express.errorHandler());
    }

    app.get('/events/:id', routes.singleEvent);
    app.get('/login', routes.login);



    return app;
}

Answer 1

您正在css中使用相对路径-更改它们以便它们以~/开头~字符表示应用程序的根。