使用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中使用相對路徑-更改它們以便它們以~/開頭~字符表示應用程序的根。