Question

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

感谢寻找朋友！

Answer 1

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

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

1 个答案: