How can I get the images that I upload in my server side?

Question

My problem is that I don't know how to get my images that I input my backend and database...So basically this is my code...

In this middleware part of upload.js

const path = require('path')
const multer = require('multer')

var storage = multer.diskStorage({
    destination: function (req,file,cb) {
        cb(null,'uploads/')
    },
    filename: function(req,file,cb) {
        let ext = path.extname(file.originalname)
        cb(null,Date.now() + ext)
    }
})

var upload = multer({
    storage:storage,
    fileFilter:function(req,file,callback){
        if (
            file.mimetype == "image/png" || file.mimetype == 'image/jpg'
        ) {
            callback(null,true)          
        } else {
            console.log(' Only jpg & png file supported')
            callback(null,false)
        }
    },
    limits: {
        fileSize:1024 * 1024 * 2
    }
})

module.exports = upload

I will pass it here at my server/routes/starter.js

router.route('/add').post(upload.single('avatar'),(req,res,next) => {

    const fullname = req.body.fullname
    const nickname = req.body.nickname
    const age = req.body.age
    const height = req.body.height
    const weight = req.body.weight
    const date_birth = req.body.date_birth

    const newStarterDeclaration = new Starter({
        fullname,nickname,age,height,weight,date_birth
        // email,phonenumber
    })

    if (req.file) {
        newStarterDeclaration.avatar = req.file.path
    }

    newStarterDeclaration.save()
        .then(starter => res.json('New Record Added!'))
        .catch(err => res.status(400).json('Error :' + err))

})

When I upload this it will be save at my upload folder I have two main folder.. the client folder and server folder..so basically what I am saying this is how i am gonna get my images at the server folder..I did something like this in my code but it doesn't work..

This is in the folder of client for the List.jsx

const Starter = props => (
    <tr>
        <td>{props.starter.fullname}</td>
        <td>{props.starter.nickname}</td>
        <td>{props.starter.age}</td>
        <td>{props.starter.height}</td>
        <td>{props.starter.weight}</td>
        <td><img src={`../server/uploads/${props.starter.avatar.substring(8)}`} alt=""/> {'../server/uploads/'+ props.starter.avatar.substring(8)}</td>
        <td>{new Date(Date.parse(props.starter.date_birth)).toDateString()}</td>
        <td>
            <Link to={'/edit/'+props.starter._id}> Edit</Link>
            <a href="#" onClick={e =>{props.deleteStarter(props.starter._id)}}> Delete </a>
        </td>
    

    </tr>
)

Don't mind too much about the others.. just think about this code

<td><img src={`../server/uploads/${props.starter.avatar.substring(8)}`} alt=""/> {'../server/uploads/'+ props.starter.avatar.substring(8)}</td>

And what I am receiving in the frontend is something like this...

Full Name   Nickname    Age Height  Weight  Date Birth  Image   Actions
Xenonon Michael1231 22  1212    121  ../server/uploads/1646981611556.png    Thu Sep 09 2021 Edit Delete
Xenonon Michael2123122  22  1212    121  ../server/uploads/1646981644622.png    Thu Sep 09 2021 Edit Delete

As you I try it to show it in the textContent..but when I try it in image it doesn't work.. Am i missing something here???

Can anyone help please haha thank you.

Answer 1

Your image paths are relative: ../server/... Please have a look (coming from the location of your .html-file), if the images are really located there.

You should also have a look into the browser-inspector, which will show you the path, where it is looking for the images.

The best approach is by using full paths (e.g https://my-server.com/uploads/image1.png)