Can not read uploaded images in express.js

Question

In my REST Api,I am uploading some images. This is my project stucture.

Now inside the public folder there is another folder called images. This is where I upload the images.

However for some reason when I typing the locahost url to a specific image ie http://127.0.0.1:61592/larissaApp/public/images/myImage-1497186011532.jpg I get this message in the browser.

Cannot GET /larissaApp/public/images/myImage-1497186011532.jpg

This is my app.js file.

            var express = require('express');
            var path = require('path');
            var favicon = require('serve-favicon');
            var logger = require('morgan');
            var cookieParser = require('cookie-parser');
            var bodyParser = require('body-parser');
            var mongoose = require('mongoose');
            var url = 'mongodb://localhost:27017/larissaApp';

            mongoose.connect(url);
            var db = mongoose.connection;
            db.on('error',console.error.bind(console,'connection error:'));
            db.once('open',function(){
               console.log("Connected correctly to server"); 
            });

            var routes = require('./routes/index');
            var users = require('./routes/users');
            var newsRouter = require('./routes/newsRouter');
            var cityRouter = require('./routes/cityRouter');
            var imageRouter = require('./routes/imageRouter');

            var app = express();
            // view engine setup
            app.set('views', path.join(__dirname, 'views'));
            app.set('view engine', 'jade');
            // uncomment after placing your favicon in /public
            //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
            app.use(logger('dev'));

            app.use(bodyParser.urlencoded({ extended: false }));
            app.use(cookieParser());
            app.use(express.static(path.join(__dirname, 'public')));
            app.use(express.static(path.join(__dirname, 'public/images')));
            app.use('/', routes);
            app.use('/users', users);
            app.use('/news',newsRouter);
            app.use('/news',newsRouter);
            app.use('/city',cityRouter);
            app.use('/image',imageRouter);

            // catch 404 and forward to error handler
            app.use(function(req, res, next) {
              var err = new Error('Not Found');
              err.status = 404;
              next(err);
            });
            // error handlers
            // development error handler
            // will print stacktrace
            if (app.get('env') === 'development') {
              app.use(function(err, req, res, next) {
                res.status(err.status || 500);
                res.render('error', {
                  message: err.message,
                  error: err
                });
              });
            }
            // production error handler
            // no stacktraces leaked to user
            app.use(function(err, req, res, next) {
              res.status(err.status || 500);
              res.render('error', {
                message: err.message,
                error: {}
              });
            });
            module.exports = app;

I was hoping that this line of code would fix that error.

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

but it doesn't. Any ideas?

Thanks,

Theo.

Answer 1

This is due to the nature of how express.static() works. If you take this bare example

const express = require('express');
const path = require('path');

const app = express();

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

app.listen(8080);

Going to localhost:8080/public/images/myImage-1497186011532.jpg will produce the same error, however localhost:8080/images/myImage-1497186011532.jpgwill work.

If you want all the static files to be served on a certain route, like in your exmaple, you'll want to replace the above line with app.use('/public', express.static(path.join(__dirname, 'public')));