Images not loading from github json-server (Vercel)

by

I am running a json-server in my github account. My project is running on Vercel. All of my images are working fine in my project, I imported the images and linked it inside my project. Like:

import bannermeal from '../images/bannermeal.png'

<img src={bannermeal} alt="" className="bannermeal img-fluid" />

When it comes to loading images from json-server, the images are loading in my localhost server. But after uploading, vercel could not load those images. I can’t use import inside db.json. My file structure is here in json-server:

{
    "meals": [
        {
            "id": 1,
            "title": "Brown Salad",
            "image": "src/images/meal1.png",
            "desc": "Sadipscing justo sit et labore duo eos at justo dolore, dolore justo sed.",
            "price": "$45"
        },
        {
            "id": 2,
            "title": "Veg Pasta",
            "image": "src/images/meal2.png",
            "desc": "Sadipscing justo sit et labore duo eos at justo dolore, dolore dolore et",
            "price": "$50"
        }
    ]
}

also the json-server repository is here: https://github.com/MASHRAFI47/chef_norman_meals

Leave a Comment