reactjs - getting image paths from json to render

I'm trying to show images that are part of a json blob. Although struggling to dynamically generate the images.

{
  "langs": [{
    "lang": "de",
    "lines": {
        "howTiles": [{
            "title": "So funktioniert die Zusammenarbeit",
            "subhead" : "Schreiben Sie Ihr Projekt in wenigen Sekunden aus",
            "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/features_emp_icon_15.png"
                },
                {
                    "title": "Transparente Zusammenarbeit", 
                    "description": "Erhalten Sie einen bindenden Kostenvoranschlag und arbeiten Sie online zusammen",
                    "image" : "../../img/home/about_us_icon_03.png"
                }
            ],
            "button": {"title": "Kostenlose Angebote erhalten", "url": "/de/projekt-ausschreibung"}
        }]
    },
    "pageURL": "/de/dienstleistungen",
    "urls":  {
      "servicePages": [{"Medienrecht":"/medienrecht"},{"Medienrecht":"/medienrecht"}],
      "otherPages": [{"other_page1": "other page"},{"other_page2": "other page 1"}]
    }
  }, {
    "lang": "en",
    "lines": {
        "howTiles": [{
            "title": "How it works",
            "subhead" : "Get started with your projects in a few seconds",
            "items" : [
                {
                    "title": "Post your project", 
                    "description": "Post your project privately to a cohort of qualified professionals",
                    "image" : "../../img/home/works_emp_01.png"
                },
                {
                    "title": "15 minute video interviews", 
                    "description": "Have 3 non-binding interviews with pre-sected lawyers",
                    "image" : "../../img/home/features_emp_icon_15.png"
                },
                {
                    "title": "Transparent collaboration", 
                    "description": "Receive a fixed price quote and work online",
                    "image" : "../../img/home/about_us_icon_03.png"
                }
            ],
            "button": {"title": "Get free quotes", "url": "/en/project-post"}
        }]
    },
    "pageURL": "/en/services",
    "urls":  {
      "servicePages": [{"Medienrecht":"/medienrecht"},{"Medienrecht":"/medienrecht"}],
      "otherPages": [{"other_page1": "other page"},{"other_page2": "other page 1"}]
    }
  }]
}

I am able to create a const Image at the top of the loop - but when I try and put the dynamic path coming in from the json it fails.

      {
        lang.howTiles[0].items.map(function (item, index) {
          const path = item.image;
          const image = require('../../img/home/about_us_icon_03.png')
          // const image = require(item.image)
          // console.log('image', image)
          console.log('path', path)

          return (
            <div key={index}>
              <div className='small-60 columns grid__row--offset--30 show-for-small-only'>&nbsp;</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'>
                      <img className='centered' src={image} style={{maxWidth: '50%', marginLeft: '25%'}} />

                      <h3 className='text--bold text--center'><font><font>{item.title}</font></font></h3>
                      <p className='text--center text--font-size-14'><font><font>{item.description}</font></font></p>
                    </div>
                  </div>
                  {
                    index === 0
                      ? <div>
                        <div className='grid__row--offset--40 row'>
                          <div className='small-40 columns small-centered'>
                            <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
                            <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a>
                          </div>
                        </div>
                      </div>
                      : null
                  }
                </div>
              </div>
            </div>
          )
        })
      }

// error when I uncomment the const require(image.path)

HowTiles.js:277 Uncaught Error: Cannot find module "."
    at webpackMissingModule (webpack:///./components/Services/HowTiles.js?:277:67)
    at eval (webpack:///./components/Services/HowTiles.js?:277:145)
    at Array.map (native)
    at HowTiles (webpack:///./components/Services/HowTiles.js?:274:32)
    at eval (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:306:16)
    at measureLifeCyclePerf (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:305:14)
    at ReactCompositeComponentWrapper._constructComponent (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:280:21)
    at ReactCompositeComponentWrapper.mountComponent (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:188:21)
    at Object.mountComponent (webpack:///../~/react-dom/lib/ReactReconciler.js?:46:35)