[在我的父组件中,我从API接收一个对象,后来我将图像作为键/对值注入其中。然后,我将该对象传递给要渲染的子组件,然后尝试按照此文章操作:
Load images based on dynamic path in ReactJs
但是,尽管复制了webpack的必要图像导入格式,但我仍然收到此错误。
Error: Cannot find module '../images/test.jpg'
该路径可以直接在组件中使用,但是……当这样导入时,东西就坏了。
这是子组件中的代码:
const WorldInfo = (props) => {
return props.world ? (
<div className={props.className}>
<h1>{props.world.map}</h1>
<img src={require(`${props.world.image}`)}/>
</div>
) :
null
}
感谢您寻找朋友!
仅传递姓氏(test.jpg
),而不传递完整路径(相对或绝对路径)。 WebPack将检测到动态需求,并将捆绑文件夹内的所有文件,如下所示:require('../images/' + props.world.image)
。