How do display images from the nodejs server

Question

I have to display image which is stored in the server and image is stored in the database like this:

    {"_id":{"$oid":"61bc353829247781224cd5b0"},
    "name":"Chicken Breast",
    "type":"protein",
    "image":"https://mmr-allapi.herokuapp.com/allfoodapi/fooduploads\\Pollo.png",  
     "__v":0}

post request of this route is like this:

foodrouter.post('/addprotein',upload.single('image'),(req,res,next)=>{

const protein = new Protein({
    _id:mongoose.Types.ObjectId(),
    name:req.body.name,
    type:req.body.type,
    image:"https://mmr-allapi.herokuapp.com/allfoodapi/"+req.file.path
    // image:"localhost:5000/allfoodapi/"+req.file.path
});
protein.save().then(result=>{
    res.status(201).json({
        message:"Protein added"
    })
})
.catch(err=>{
    res.status(500).json({
        error:err
    })
})

});

this is how api is displaying

{
"protein": [
{
"name": "Egg",
"type": "protein",
"image": "https://mmr-allapi.herokuapp.com/allfoodapi/fooduploads/Egg.png"
},
{
"name": "Chicken Breast",
"type": "protein",
"image": "localhost:5000/allfoodapi/fooduploads\\Pollo.png"
},
{
"name": "Chicken Breast",
"type": "protein",
"image": "https://mmr-allapi.herokuapp.com/allfoodapi/fooduploads\\Pollo.png"
},
{
"name": "Chicken Breast",
"type": "protein",
"image": "localhost:5000/allfoodapi/fooduploads\\Pollo.png"
},
{
"name": "Chicken Breast",
"type": "protein",
"image": "https://mmr-allapi.herokuapp.com/allfoodapi/fooduploads\\Pollo.png"
}
]
}

and here is my route for displaying image

foodrouter.get("/fooduploads/:str", (req, res) => {
    console.log(req.params.str)
    console.log(req.url)
    res.sendFile(path.join(__dirname, `../fooduploads/${req.params.str}`));
  });

but here problem is when I click on imaage link which is stored in database ( https://mmr-allapi.herokuapp.com/allfoodapi/fooduploads\\Pollo.png ) then I am redirect to the image by image routing but problem is when I sent this link to some else and while using this link in the front end this is not working it was saying

 Cannot GET /allfoodapi/fooduploads//Pollo.png

How can I resolve this please help

Answer 1

I see it's stored like this:

{
  "name": "Chicken Breast",
  "type": "Protein",
  "image": "https://images-prod.healthline.com/hlcmsresource/images/AN_images/baked-whole-chicken-1296x728.jpg"
},

And the image behind this link is a proper jpeg with nice looking baked chicken. It seems your database keeps only links to the images, not the images themself. This particular chicken for example is stored on AWS S3, other images are stored on different resources.

Well, apart from the egghttps://mmr-allapi.herokuapp.com/allfoodapi/fooduploads/Egg.png This one technically works, but it doesn't look as tasty as the chicken.