Reactjs json looping image path not loading - json

Question

I am new to reactjs - I am keen to retain all the content from json - but I am having an issue with the images.
So the json looks like this:
"items" : [
{
"title" : "Projekt ausschreiben",
"description" : "Schreiben Sie Ihr Projekt aus und zeigen Sie es einer handverlesenen Gruppe von Fachexperten",
"image" : "/img/home/works_emp_01.png"
},
{
"title" : "15 Minuten Video-Gespräch",
"description" : "Führen Sie eine unverbindliche Unterhaltung mit 3 vorselektierten Anwälten",
"image" : "/img/home/works_emp_02.png"
},
{
"title" : "Transparente Zusammenarbeit",
"description" : "Erhalten Sie einen bindenden Kostenvoranschlag und arbeiten Sie online zusammen",
"image" : "/img/home/works_emp_03.png"
}
]
and then I've tried to loop through the markup on the template like this.
In a previous research it was suggested to use a require.context function to get the image paths defined. - but this isn't working
const pathToImages = require.context('./src', true)
{
lang.howTiles[0].items.map(function (item, index) {
return (
<div key={index}>
<div className='small-60 columns grid__row--offset--30 show-for-small-only'> </div>
<div className='small-45 medium-20 small-centered medium-uncentered columns'>
<div className='row'>
<div className='small-60 medium-45 small-centered columns'>
<div className='relative-container'>
x<img src={pathToImages(imagesArray[index], true)} />x
<img className='centered' src={imagesArray[index]} style={{maxWidth: '50%', marginLeft: '25%'}} />
<h3 className='text--bold text--center' style={{marginTop: '25px'}}>{item.title}</h3>
<p className='text--center text--font-size-14' style={{marginTop: '15px'}}>{item.description}</p>
</div>
</div>
</div>
</div>
</div>
)
})
}

Answer 1

check if yours src={ "../your_path_to_image" } works as expected at all.
then check lang.howTiles[0].items for same values. 100% something lost in translation here.
anyway i dont get why ya use require.context('./src', true) ?? it just loads images separate from div src
..maybe helpfull https://github.com/facebookincubator/create-react-app/issues/517

Answer 2

make simple array with your image paths and in render function just one div with map and src={item} to check 100% if it path problem or more .. i still got strong feeling of that is problem.
btw. in mentioned older thread there already shows up some problems with this approach.
and i still see no reason to use require.context there if ya simply want add dynamic path to view render.
as i understand web packs require` it runs per build and do all magic paths related job etc.. but it will run in trouble when dynamic path names given
gaearon commented on Mar 10
Is there a problem with explicitly importing them in the code? After all require.context is just sugar for doing that.
here is my code example how to deal with dynamic paths:
var some_path = ( some_value ) ? ${root_path}/0${other_value + tag.toUpperCase()}_Active.svg : default_path;
return <div className={class_names.join(' ')} >
<div className="some class name">
<img src={some_path} alt="image" />
</div>
</div>;
and with array
return (
<div className="class name">
{my_array.map(function( path ){
return <img src={ path } alt="image" />
})}
</div>
);