Returning image url's to the front-end from Postgres - Node / React

I have a function within my app that I have working that lets me submit a form with images that then stores the image in a file using Multer and uploads a URL to my Postgres database. When I return the file to the front end I am just left with filename that relates to the images but I don't know how to get the file path added so that the image displaying.

Should I be adding the prefix file path when inserting it into the database? Or is there a security issue if I display the full file path on the front-end. Obviously I know my front and backends should be decoupled and operating independently. I could also have a separate file for images outside of the backend but I am not sure if this is a recommended process. If this was in a professional environment would It just be handled by the likes of Google Cloud, AWS etc so I'm not sure if following the decoupling process is completely possible in this case.

I have seen process-cwd in some similar cases but I'm not sure if this is what I need to do. Could I hard code the file path in the front-end React component and then use the redux data that has the filename at the end?

I have the photo filename stored in my Redux store however I don't know to go from there. The image is in my backend/assets file at the minute.

API inserting the image into Postgres.

exports.createDiveSpot = async (req, res) => {

    const fileNameWithExtension = `${req.file.filename}-${req.file.originalname}`
    const newPath = `./assets/diveSpot/${fileNameWithExtension}`

    fs.rename(req.file.path, newPath, function (err) {
            if (err) {
                console.log(err)
                res.send(500)
            }
            console.log(req.body)
            diveSpot.create({
                diveLocation: req.body.diveLocation,
                diveRegionID: req.body.diveRegionID,
                diveSpotTypeID: req.body.diveSpotTypeID,
                diveSpotDescription: req.body.diveSpotDescription,
                photos: fileNameWithExtension,
            }).then((data) => {
                res.send(data)
            })

Update

In the below method. I notice that I can enter a file name easily in the "const fileNameWithExtension" line. Can I enter a url for the public file on my front-end or should I make a file in my backend public with express. Should I be putting a file from my backend into my front-end again as it is technically already being submitted from the front-end then multer would move it to the front?

I have included my latest error message below.

exports.createArticle = async (req, res) => {
    console.log(req.body)
    const fileNameWithExtension = "../home/backend/assets/article/"`${req.file.filename}-${req.file.originalname}`
    const newPath = `./assets/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

[Error: ENOENT: no such file or directory, rename 'C:\Users\James Greene\WebstormProjects\softwaredevproject\SustainableScuba\backend\assets\article\678c78
193bb73ab287bbb6b644a0c86e' -> 'C:\Users\James Greene\WebstormProjects\softwaredevproject\WebApp\sustainable-scuba-web-app\public\article\678c78193bb73ab28
7bbb6b644a0c86e-sharkfeat.jpg'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'rename',
  path: '...\\SustainableScuba\\backend\\assets\\article\\678c78193bb73ab287bbb6b644a0c86e',
  dest: '...\\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 (...\backend\node_modules\express\lib\response.js:771:1
0)

It is being rendered on the front-end in Redux and is in the store. I am trying to display the image on the card component below.

         <IconButton aria-label="settings">
                        <MoreVertIcon />
                    </IconButton>
                }
                title={articleList.articleTitle}
                subheader={userID}/>
            <CardMedia
                id="Photos"
                className={classes.media}
                image={articleList.photos}
                title="Dive Photos"/>
            <CardContent>
                <Typography className="Type" id="Type" variant="body2" color="textSecondary" component="p">
                    {articleType}