Javascript 反应-找不到模块-尝试传递单元格图像路径变量

这是为什么

function imageFormatter(cell, row){  
  return <img src={require('../img/myImage.jpg)'} />;
}

然而，我的页面将无法成功呈现。控制台日志后面的DOM错误为

 Uncaught Error: Cannot find module ''../img/myImage.jpg''.

我知道我有一个黑客函数的报价，但我只是想找出我的问题是什么。我不认为是单引号。我开始怀疑我是否有一个网页或什么问题

我正在使用React引导表模块，我正在尝试将图像插入单元格。我收集的{data}有pic的路径，这就是我试图通过的路径。这是我的引导表以防万一

       <BootstrapTable data={Evt1} hover selectRow={ selectRowProp } bodyStyle={ { background: '#f4a442' } }>
      <TableHeaderColumn isKey dataField='pk_id_competitor'>compId</TableHeaderColumn>
<TableHeaderColumn dataField='pic' dataFormat={imageFormatter}>pic</TableHeaderColumn>
      <TableHeaderColumn dataField='rname'>rname</TableHeaderColumn>          
      <TableHeaderColumn dataField='hname'>hname</TableHeaderColumn>
      <TableHeaderColumn dataField='eventtier'>eventtier</TableHeaderColumn>
    </BootstrapTable>

康皮德
照片
核糖核酸
海纳姆
事件发生者

Webpack检查程序的源代码，以确定要包括哪些资产。通过将require语句从静态字符串（可以直接映射到磁盘上的文件）更改为动态变量，它不再能够满足依赖关系。有关如何执行动态要求的更多信息，请查看此项：

我的建议是将动态图像限制在某个目录中，如下所示：

function imageFormatter(cell, row){  
    return <img src={require('../img/' + cell)} />;
}

---

Webpack检查程序的源，以确定要包括哪些资产。通过将require语句从静态字符串（可以直接映射到磁盘上的文件）更改为动态变量，它不再能够满足依赖关系。有关如何执行动态要求的更多信息，请查看此项：

我的建议是将动态图像限制在某个目录中，如下所示：

function imageFormatter(cell, row){  
    return <img src={require('../img/' + cell)} />;
}

---

这种快速的变通很好。我会确保在你提供的网页上阅读更多内容。到目前为止，我对Webpack的体验是相当痛苦的。非常感谢您的快速帮助。回答接受@埃里克，你太棒了。那种快速的变通很好。我会确保在你提供的网页上阅读更多内容。到目前为止，我对Webpack的体验是相当痛苦的。非常感谢您的快速帮助。回答接受@埃里克，你太棒了。

function imageFormatter(cell, row){  
    return <img src={require('../img/' + cell)} />;
}

// look in ../img, allow subdirectories, and satisfy requests for all jpgs, pngs, and gifs therein
// this will add all of these images to your final bundle!
var imageRequirer = require.context('../img', true, /^\.\/.*\.(jpg|png|gif)$/

function imageFormatter(cell, row){  
    return <img src={imageRequirer(cell)} />;
}