Dynamically Loading Local Images with ReactJS

I'm trying to render several images from an array, passed onto an "Image" component as a property. However, for whatever reason, the local images I would like to render are not showing up. If I load an image hosted at a web address, that image will show up, indicating that there is nothing wrong with the "imageSource" property being passed onto the Image component. I have tried playing with the source format like so:

let source = 'require(./img/' + props.imageSource + ")";

or trying:

<img src= role="presentation" style={style.image} />

...but nothing I do makes any difference.

The component is as seen below. I am totally stuck, so help would be much appreciated!

import React from 'react';

let Image = function statelessFunctionComponentClass(props) {

  let source = './img/' + props.imageSource;

  const style = {

    image : {

      width: '400pt',
      height: '400pt'
    }
  }

  return (

    <img src={source} role="presentation" style={style.image} />
  )
}

export default Image