React backgroundImage referenced in JSON file path seem weird - reactjs

Question

My app is created with create-react-app,
Im iterating with .map through my JSON file where I store the local path to the image but I assume create-react-app changes the pathing somehow and I don't understand how.
const list = this.state.people.map((d, i) => { return <li
key={i}
className="content"
style={{ backgroundImage: `url(${d.Picture})` }}
>
Above is my opening li tag where I loop out the data from my JSON file below:
The Picture in "Adam" works great and shows up on the page, however that is not where the picture is stored. I found that path in chrome dev tools so I just copy pasted.
The example below in "Bob" is the actual path to the img (from root)
I want to be able to put all my images in the images folder and store the correct path in the JSON file
{
"Name": "Adam",
"Born": 1971,
"Picture": "/static/media/elonmusk.3489bce1.jpg"
},
{
"Name": "Bob",
"Born": 1999,
"Picture": "/src/css/images/elonmusk.jpg"
},
Above is my folder structure, App.js is where i render the data, persons.json is where i store the file path, and images is the folder where I have the images

Answer 1

Images need to be statically analysable so you need to require them. Please refer to this for more background info.
So with your example above, instead of using a jsonfile create a people.js file instead like this with require statements for each image:
// file: people.js
const people = [
{
id: 0,
name: 'Adam',
born: 1971,
picture: require('../path/to/image.jpg')
},
{
id: 1,
name: 'Bob',
born: 1999,
picture: require('../path/to/image2.jpg')
}
]
Then you can map over this info to produce the jsx and your images will render.
const people = require('../path/to/people.js')
renderPeopleList () {
return people.map(p =>
<div key={p.id} style={{ backgroundImage: `url(${p.picture})` />
)
}