img src={require()} not working with json in React

Question

Thank you for reading this. I'm new to React, and I am having problem importing images from local folder.

import jobData from './data.json';

function Job(){
      return (
        <div className="jobList">
        {jobData.map((data)=>(
            <div className="job" key={data.id}>
                <div className="logo"> 
                    //////////// PROBLEM HERE //////////////
                    {console.log("LOGO PATH:"+data.logo)}
                    <img src={require('./images/photosnap.svg').default}/>
                    <img src={require(data.logo).default} alt={data.company + " logo"}/>
                    //////////// PROBLEM HERE //////////////
                </div>
            </div>
        ))
        }
    </div>
    )
  }

export default Job; 

I wonder why

<img src={require('./images/photosnap.svg').default}/>

works but

<img src={require(data.logo).default} alt={data.company + " logo"}/>

doesn't work even though I double checked by console.log that the first data.logo surely is './images/photosnap.svg'.

'./data.json' is like this:

[
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./images/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
  },
  {
    "id": 2,
    "company": "Manage",
    "logo": "./images/manage.svg",
    "new": true,
    "featured": true,
    "position": "Fullstack Developer",
    "role": "Fullstack",
    "level": "Midweight",
    "postedAt": "1d ago",
    "contract": "Part Time",
    "location": "Remote",
    "languages": ["Python"],
    "tools": ["React"]
  },
///...and more

Answer 1

Require needs a static path

Option #1

---

Images.js

    export default{
    company: require("./images/manage.svg"),
    Photosnap: require("./images/photosnap.svg")
    }

In your component

import images from './images.js'

 {jobData.map((data) => (
        <div className="job" key={data.id}>
          <div className="logo">
            <img
              src={images[data.company]}
              alt={data.company + " logo"}
            />
          </div>
        </div>
      ))}

Option #2

---

Alternatively, change the path to just the name in your json which should work

  "logo": "photosnap.svg",

  {jobData.map((data) => (
        <div className="job" key={data.id}>
          <div className="logo">
            <img
              src={require(`./images/${data.logo}`)}
              alt={data.company + " logo"}
            />
          </div>
        </div>
      ))}

Answer 2

you try to handle the promise function on the tag that's why you getting the error. For that handle, you have to use a direct URL like this

//////////// Problem Solved //////////////
{console.log("LOGO PATH:"+data.logo)}
<img src={`${base_url}/images/photosnap.svg`}/>
<img src={`${base_url}/${data.logo}`} alt={`${data.company} logo`}/>
//////////// Problem Solved //////////////