reactjs动态渲染图像

Question

要明确：

<img src={require('../styles/myimage.jpg')} />

工作正常。但是我希望从api动态地将此路径作为字符串。在我的父组件中，我获取它并传递给child：

<img src={require(this.props.image)} />

在这种情况下， this.props.image 与＆＃39; ../ styles / myimage.jpg＆＃39; 相同。但它对我不起作用并抛出此错误＆＃34;未捕获（在承诺中）错误：找不到模块＆＃34;。＆＃34;

我该如何解决？

目录树是（我试图从image.js获取myimage.jpg）enter image description here： 和webpack配置：enter image description here

Answer 1

除了评论之外，您可以在渲染方法中执行此操作：

if (!this.props.image) return false;

Answer 2

做一个简单的测试，将包含你的jpg文件的样式路径移动到组件的相同路径，并在props中尝试这个路径：

props.image = './styles/myimage.jpg'

然后

<img src={require(this.props.image)} />