reactjs渲染图像动态

问题描述：

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

工作正常。但我想从api中以字符串的形式动态获取此路径。在我父组件我把它拿来和传递给子女：

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

在这种情况下this.props.image相同“../styles/myimage.jpg”。但它并没有为我工作，并抛出这个错误“未捕获（在承诺）错误：无法找到模块”。”

我该如何解决

的目录树（我想取MYIMAGE？从image.js .JPG）enter image description here：而配置的WebPack：enter image description here

确保道具都值当你的渲染被称为 –

@ShubhamKhatri我甚至尝试有条件的渲染，所以我用fetch ... setState（{image：data，loadImage：true}）发出请求，然后在我的子组件中检查loadImage是否为true，然后渲染“this.props.loadImage？：null“。 – DarKsi

答

除了评论，你可以做的是在你的渲染方法试试这个：

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

答

做一个简单的测试，移动样式路径与包含你的JPG文件到您的组件相同的路径，并尝试在道具路径：

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

然后

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

reactjs渲染图像动态

相关推荐