Unable to access images from upload folder in React-Node - node.js

Question

In my MERN app, I am trying to access the images on the client-side that has been saved on the local database using multer.
The structure of my backend folder goes like this:
--- api
--- controllers
--- model
--- routes
--- config
--- db.js
--- appConfig.js
--- utils
--- uploads
--- multerMiddleware.js
--- app.js
The image uploading and storing to local DB works completely fine. When a new data is created, the data received by the client in API response contains the URL of the image uploaded so that it can be accessed again (like for displaying image thumbnail).
My code goes like:
App.js
const express = require("express");
const path = require('path');
const app = express();
const directory = path.join(__dirname, '/uploads');
app.use('/uploads', express.static(directory));
require("./config/db/db")();
require("./config/appRoutes/appRoutes")(app);
module.exports = app;
multerFile.js
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/uploads')
},
filename: function (req, file, cb) {
const fileName = file.originalname.toLowerCase().split(' ').join('-');
cb(null, fileName);
}
});
const upload = multer({
storage
});
module.exports = upload;
controller
exports.createService = async (req, res) => {
const service_name = req.body.main_name;
const url = req.protocol + '://' + req.get('host');
let service_pic;
if (req.file) {
service_pic = url + '/utils/uploads/' + req.file.filename;
}
try {
const service = new Services({
_id: new mongoose.Types.ObjectId(),
service_name,
service_pic
});
const new_service = await service.save();
res.status(201).json({ message: "New data created", result: new_service });
} catch (error) {
console.log(error);
res.status(500).json({ message: "Internal server error", error });
}
}
With the route, http://localhost:5000/services/all, I get the JSON data as:
{
createdAt: "2020-09-07T08:25:11.581Z"
service_name: "TEST"
service_pic: "http://localhost:5000/utils/uploads/testio-logo-rgb1.png"
updatedAt: "2020-09-07T08:25:11.581Z"
}
When I try to access http://localhost:5000/utils/uploads/testio-logo-rgb1.png, it always returns an error: "error":{"message":"Route Not found"}}. The images are gettings stored properly into the /uploads folder, but still not accessible on the client.
I am not sure what thing is going wrong. Any help to resolve this is appreciated.

Answer 1

Change '/uploads' to 'utils/uploads'
// app.js
const directory = path.join(__dirname, 'utils/uploads');
app.use('/uploads', express.static(directory));
This block of code means: you've set up a static-assets serving endpoint at /uploads. Everytime a request hits this endpoint, your server will look up to the folder /utils/uploads.
An example request would be: http://localhost:5000/uploads/testio-logo-rgb1.png

Answer 2

I believe your URL is incorrect,
http://localhost:5000/utils/uploads/testio-logo-rgb1.png
should be
http://localhost:5000/uploads/testio-logo-rgb1.png