variables in require (dynamic require) - require

Question

I'm writing an react project, and I want to require imgs src dynamically in jsx render, just like this:
return (
<li className="grid">
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={require(category.imgSrc)}/> // !!here
</div>
<span className="title">{category.name}</span>
</a>
</li>
)
//category.imgSrc is like "../../images/01_taxi.png"
however, I got the error:
Uncaught Error: Cannot find module '../../../01_shunfengche.png'.
so, I try the require.context like this
var requireContext = require.context("../../../images/",false,/\.png$/);
var imgsrc = requireContext("01_taxi.png");
return (
<li className="grid">
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={imgsrc}/>
</div>
<span className="title">{category.name}</span>
</a>
</li>
)
it still doesn't work, can anyone help me ?

Answer 1

finally,i tried this:
var requireContext = require.context("../../../images",false,/\.png$/);
var that = this;
var lis = this.props.data.map(function(category,index){
var imgsrc = requireContext("./"+category.img); //here!
return (
<li className="grid" data-value={category}>
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={imgsrc}/>
</div>
<span className="title">{category.zh_name}</span>
</a>
</li>
)
});
write the correct path really does matter.