表达静态文件服务配置

Question

I'm trying to serve static assets from express server which also happens to have Apollo Server installed on it, but this is an issue related to the express.static configuration. Here's a screenshot of my folder structure

Here's the code for express configuration. It lies inside /config/app.js

import express from 'express';
import bodyParser from 'body-parser';
import morgan from 'morgan';
import cookieParser from 'cookie-parser';
import cors from 'cors';
import path from 'path';

const PORT = process.env.PORT || 3001;
const environment = process.env.NODE_ENV || 'development';
const loggingType = environment === 'development' ? 'dev' : 'tiny';

const app = express();
app.use(
  bodyParser.json({ limit: 1024 * 1024 * 2000, type: 'application/json' })
);
app.use(morgan(loggingType));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, './assets/images')));

export default app;

If i try to access, localhost:3001/images, it says Cannot get /images

What am I doing wrong?

Answer 1

Please try the following:

app.use(‘/assets’, express.static(path.join(__dirname, '..', ‘assets’)));

Change the parameters to path.join as per your directory structure.

Answer 2

__dirname represents the directory name of the current module. You should use '../assets/images' as a static path for your images.

Trying to access localhost:3001/images returns an error because it is a static directory, not a file. Accessing localhost:3001/images/test.png should work.

But first, you need to define your static directory. Instead of :

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

do :

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

Hope this helps!

EDIT : changed __dirname target directory to correct one.

Answer 3

You can use the static function in another way:

app.use('/', express.static('assets'));

...and call the image as the example below:

<img src='/images/logo.png'>

I hope this helps.