Images aren't showing in Vercel Deployment

Viewed 20

When I use the 'Live Server' to run my application the Images look fine in my local server, but after deploying the same react/next application to vercel, the images aren't getting rendered properly which are present in the public folder.

<div className="content">
      <div className="cards">
        {jsonData.map((info) => {
          return (
            <div className="card" key={info.id}>
              <div className="card-head">
                <img src="./06.png" />
                <div className="icon-body">
                  <FiGithub className="git-icon" />
                </div>
              </div>
              <h3>{info.name}</h3>
              <div className="desc">{info.description}</div>
              <div className="stack">{info.stack}</div>
            </div>
          );
        })}
      </div>
    </div>

Expected Output (in Local Server)

Vercel Deployed Output

1 Answers

This is happening due to the folder structure. I have faced the same issue before.

You can add structure like /public/static/images and put your images inside like below:

<img src={"/static/images/test.png"} alt="" />
Related