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

在我的父组件中，我从API接收一个对象，稍后将图像作为密钥/对值注入该API。然后，我将该对象传递给要渲染的子组件，并尝试按照本文进行此操作：

然而，尽管复制了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
}

constworldinfo=（道具）=>{
返回道具世界(
{props.world.map}
) : 
无效的
}

---

谢谢你找朋友

不传递完整路径（相对或绝对），只传递姓氏（

test.jpg

）。WebPack将检测到动态require，并将绑定文件夹中的所有文件，如下所示：

require（'../images/'+props.world.image）

而不是传递完整路径（相对或绝对），只传递姓氏（

test.jpg

）。WebPack将检测到一个动态require，并将文件夹中的所有文件捆绑起来，如：

require（'../images/'+props.world.image）

在没有require的情况下使用它们应该会起作用？

稍后我将图像作为密钥/对值注入其中

对于JavaScript来说是一件奇怪的事情。你能举一个例子说明你是如何做到这一点的吗？与其传递一个完整的路径（相对的或绝对的），不如只传递姓氏（test.jpg）。WebPack将检测到动态require，并将绑定文件夹中的所有文件，如：

require（'../images/'+props.world.image）

。我不确定这是否是您的问题，但这就是WebPack的工作原理。@isherwood，但可能该图像未作为HTTP请求提供。它只是作为一项资产在项目内部形成一部分，就像您使用

.json

这样做一样。为此，您实际上需要一个图像加载器，它将图像转换为base64数据URL。如果你不介意的话，我将为这个问题创建一个答案：在没有要求的情况下使用它们应该可以工作吗？

稍后我将一个图像作为键/对值注入其中

对于JavaScript来说是一件奇怪的事情。你能举一个例子说明你是如何做到这一点的吗？与其传递一个完整的路径（相对的或绝对的），不如只传递姓氏（test.jpg）。WebPack将检测到动态require，并将绑定文件夹中的所有文件，如：

require（'../images/'+props.world.image）

。我不确定这是否是您的问题，但这就是WebPack的工作原理。@isherwood，但可能该图像未作为HTTP请求提供。它只是作为一项资产在项目内部形成一部分，就像您使用

.json

这样做一样。为此，您实际上需要一个图像加载器，它将图像转换为base64数据URL。如果你不介意的话，我会给你一个答案：P