CODEWITHSUNDEEP
javascriptnode.jsexpress
Denis Ivanov
Denis Ivanov

Reputation: 905

Issue with serving images from express.js

I have issues with serving .png image from my express app. I think there is something wrong with the router setup, because it tries to render page rather than serve a static file. The setup is as follows:

// app.js
// Module dependencies
var express = require('express'),
    http = require('http'),
    path = require('path'),
    session = require('./middlewares/session');

// Create server
var app = module.exports = app ? app : express();

app.set('port', process.env.PORT || 3000);
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
app.set('view options', { layout: true });

app.use(express.static(path.join(__dirname, '../../public')));
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.errorHandler());
app.use(express.responseTime());
app.use(express.cookieParser());
app.use(app.router);

var routes = require('./routes')(app);

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

// Start server
http.createServer(app).listen(app.get('port'), function() {
    console.log('Express server listening on port ' + app.get('port'));
    console.log(__dirname);
});

Then my routes file looks like this:

// routes.js    
module.exports = function(app) {
        //Routes
        // app.get('/', routes.index);
        app.get('/api/places', places);

        app.get('/add-review', review);
        app.get('/logout', logout);
        app.get('/:location?/:category?', session(app), routes.index);
    }

The jade view where I'm trying to load an image

# view
img(src="/nodeapp/img/logo-white.png")

I'm using reverse proxy for node app which root is this http://app.com/nodeapp

The folder structure:

public
   components
   css
   img
   js
server
   srs
      views
      app.js
   test

The error that I'm getting is this:

TypeError: Cannot read property 'logo-white.png' of undefined
    at Object.get_listings (/app/server/src/models/vendors.js:354:16)
    at exports.index (/app/server/src/handlers/index.js:6:31)
    at callbacks (/app/node_modules/express/lib/router/index.js:161:37)
    at /app/server/src/middlewares/session.js:13:5
    at /app/bbe/server/src/api.js:18:3
    at _fulfilled (/app/node_modules/requestify/node_modules/q/q.js:798:54)
    at self.promiseDispatch.done (/app/requestify/node_modules/q/q.js:827:30)
    at Promise.promise.promiseDispatch (/app/node_modules/requestify/node_modules/q/q.js:760:13)
    at /app/node_modules/requestify/node_modules/q/q.js:574:44
    at flush (/app/node_modules/requestify/node_modules/q/q.js:108:17)
GET /img/logo-white.png 500 857ms

So, here it's trying to actually render my jade views rather than serving from a static folder. Other static files such as js and css are served fine. Why is this happening?

Thanks!

=== Edit (added function that renders views) ===

exports.index = function(req, res) {  
    res.locals.location = data().get_location(req.params);  
    res.locals.categories =  data().get_categories(res.locals.location);  
    res.locals.listings = data().get_listings(res.locals.location, req.params.category);  

    var meta = {  
        title: "My app",  
        module: "/nodeapp/js/core/index/main.js"  
    };  

    res.render('nodeapp/index', meta);  
};

Upvotes: 0

Views: 1067

Answers (1)

Chris
Chris

Reputation: 1611

I had trouble myself with setting the 'views' path, so maybe the issue is the same.

I would try to set different view paths for the different sites I had like so (per app)

// site1.js
app.set('views', __dirname + '/views/site1');

// site2.js
app.set('views', __dirname + '/views/site2');

For some reason, it just wouldn't find the views to render. So, I had to set them all back to just '/views' directory, and when I rendered them, I included the extra directory there, and that worked.

I'm thinking if you restructured your directories so this

app.use(express.static(path.join(__dirname, '../../public')));

becomes

app.use(express.static(path.join(__dirname, '/public')));

that it might start working for you. I'm assuming all the other things in your public directories aren't being handled right either. If it's just that png file...check the name, rename it, fiddle with it.

Upvotes: 0

Related Questions