get local image path from json in react - reactjs

Question

How to pick the local path of image
Json
"avatarUrl": "avt1.jpg"
All the images are under src>img folder.
I am looking for absolute path + image name from json.
How I can achieve this
reactJs
<img src={require('./img/avt1.jpg')} width="60" />
Package.js
{
"name": "lummdb",
"version": "0.1.0",
"private": true,
"dependencies": {
"moment-timezone": "^0.5.14",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-fontawesome": "^1.6.1",
"react-scripts": "1.0.16",
"axios": "^0.17.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
}

Answer 1

Seems you are using create-react-app , try to add NODE_PATH=src in your environment variable , or append it to script alias
"start": "NODE_PATH=src react-scripts start",
If you are done, you can do the following :
<img src={require('img/avt1.jpg')} width="60" />
Then, if you are getting the name of image from json dynamically :
<img src={require(`img/${avatarUrl}`)} width="60" />
If does not work, consider to export NODE_PATH before :
export NODE_PATH=src;
npm start;

Answer 2

Move all of your images to the public/images.
JSON file:
{
"title": "something",
"image_link": "../images/yourfilename1.jpg"
},
{
"title": "something2",
"image_link": "../images/yourfilename2.jpg"
}
CardComponent:
const InfoCard = ({image_link, title}) => {
return (
<div>
<h3>{title}</h3>
<img src={image_link} alt={title} />
</div>
)
}
export default InfoCard;