将图片作为道具动态传递给子组件

问题描述 投票:0回答:1

[在我的父组件中,我从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
}

感谢您寻找朋友!

javascript reactjs image webpack
1个回答
1
投票

仅传递姓氏(test.jpg),而不传递完整路径(相对或绝对路径)。 WebPack将检测到动态需求,并将捆绑文件夹内的所有文件,如下所示:require('../images/' + props.world.image)

© www.soinside.com 2019 - 2024. All rights reserved.