无法读取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.jpg will 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')));