无法从React / JSX中的状态渲染图像

我正在从数据库中获取图像的路径。图像文件存储在本地。我将路径存储为组件的状态，从而使组件保持动态，而不是简单地从其位置导入路径。所以...

这可行...

  render() {
    return (
      <div>
        <Col xs={6} md={4}>
          <Image src={require('../../../../public/uploads/file-1516414373384.png')}responsive />
        </Col>
      </div>
    )

但是，这不...

class Reports extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reports: [],
      photos: null
    }
  }

  componentWillMount() {
    var reports = []
    axios.get('/uploadUserImage')
      .then( (response) => {
        response.data.forEach(function(report){
          reports.push(report)
        })
      }).then(() => {
        this.setState({reports})
      }).then(() => {
        var path = '../../../../'+this.state.reports[0].file;
        var rightPath = path.replace(/\\/g,"/");
        this.setState({photos: rightPath})
      })
      .catch( (error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <Col xs={6} md={4}>
          <Image src={require(this.state.photos)}responsive />
        </Col>
      </div>
    )

即使第二个无效代码与第一个有效代码编译的方式相同。

我收到一条错误消息：

  Uncaught Error: Cannot find module "."

所以也许我的网页包出了问题？但是，如果这是真的，那么两种情况都不会引发错误吗？？？

我也尝试过模板文字...

<Image src={require(`${this.state.photos}`)}responsive />

就像对类似问题的答案一样，但没有骰子-相同的错误。