React: How can I dynamically render images mapping through a list?
If you're not importing the images into your JS file i.e.
import logo from './logo.png'; // Tell Webpack this JS file uses this imageyou should use the public folder
render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using `import` for getting asset URLs // as described in “Adding Images and Fonts” above this section. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;}See:
Except you put the images in the public folder this wouldn't resolve however the fix is relatively simple.
{ "home": { ... "staff": [ { ... "imgUrl": require("../Images/Jon.JPG"), ... }, ... ], ... } ...}