How insert URL's to images on database so that I can display on front-end

[james_g2001]

I have created a API method on my backend that inserts a image filename into my postgres database and it then uses Multer to put the photo in an image folder on my backend. At the minute when I use Redux to return a values including the URL I don’t know how to serve the photo image as the prefix to the URL is not included and when I do try to add the prefix it throws errors.

As I am using Express I am aware that I need to do something in terms of making the file public. Does this mean I can just enter the URL to the backend and It will display on the front-end as long as the URL is correct? I have a public images file in my front-end, could I use this instead and get Multer in the backend to store in this folder?

exports.createArticle = async (req, res) => {
    console.log(req.body)
    const fileNameWithExtension = `../../public/article/${req.file.filename}-${req.file.originalname}`
    const newPath = `../../WebApp/sustainable-scuba-web-app/public/article/${fileNameWithExtension}`
    console.log(req.body)
    fs.rename(req.file.path, newPath, function (err) {
            if (err) {
                console.log(err)
                res.send(500)
            }
            article.create({
                articleTitle: req.body.articleTitle,
                articleContent: req.body.articleContent,
                userID: req.body.userID,
                articleTypeID: req.body.articleTypeID,
                photos: fileNameWithExtension,
            }).then((data) => {
                res.send(data)
            })
                .catch((err) => {
                    res.status(500).send({
                        message: err.message || 'Some error occurred while creating the post.',
                    })
                })
        }
    )}

error message

 userID: '6',
  articleTypeID: '1'
}
[Error: ENOENT: no such file or directory, rename '...\SustainableScuba\backend\assets\article\678c78
193bb73ab287bbb6b644a0c86e' -> '....\WebApp\sustainable-scuba-web-app\public\article\678c78193bb73ab28
7bbb6b644a0c86e-sharkfeat.jpg'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'rename',
  path: '...\\SustainableScuba\\backend\\assets\\article\\678c78193bb73ab287bbb6b644a0c86e',
  dest: '...\\softwaredevproject\\WebApp\\sustainable-scuba-web-app\\public\\article\\678c78193bb73ab287bbb6b644a0c86
e-sharkfeat.jpg'
}
express deprecated res.send(status): Use res.sendStatus(status) instead controllers\article.controller.js:15:21
Executing (default): INSERT INTO "articles" ("articleID","articleTitle","articleContent","photos","userID","articleTypeID") VALUES (DEFAULT,$1,$2,$3,$4,$5)
 RETURNING *;
Unhandled rejection Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:485:11)
    at ServerResponse.header (...\SustainableScuba\backend\node_modules\express\lib\response.js:771:1
0)