"Images not loading on Vercel deployment but work on localhost"

Question

I have my Node application deployed on Vercel: node-demo-ashen.vercel.app. The problem I am encountering is that on localhost:3000 the images are loading fine, but my images are not loading on Vercel. I have also configured my vercel.json file several times: { "version": 2, "builds": [ { "src": "server.js", "use": "@vercel/node" } ], "routes": [ { "src": "/images/(.)", "dest": "/public/images/$1" }, { "src": "/(.)", "dest": "/server.js" } ] } Help me fix this issue.

I have tried configuring the vercel.json file and also tried logging out and logging in again to resolve the issue, but it seems that it is not working. The images are loading fine on localhost, but on Vercel, images are not loading at all.

Answer 1

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

const app = express();

// Serve static files from the 'public' directory
// app.use(express.static(__dirname + "/public/"));
app.use(express.static(path.join(__dirname, 'public')));

// Set the view engine
app.set('view engine', 'ejs'); // Change 'ejs' to your view engine if different

// Set the views directory
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
    res.render('index'); // Ensure 'index' matches your view file name
});

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

// Import routes from routes.js
const routes = require('./routes');
app.use('/', routes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

    enter code here

not working still

Answer 2

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

const app = express();

// Set the view engine
app.set('view engine', 'ejs'); // Change 'ejs' to your view engine if different

// Set the views directory
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
    res.render('index'); // Ensure 'index' matches your view file name
});

// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Import routes from routes.js
const routes = require('./routes');
app.use('/', routes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});