在React应用中使用require加载图片

问题描述

我是React的新手，我试图创建一个涉及纸牌的游戏，其中Websocket返回一个纸牌名称数组，并且在前端，我从本地图像目录中生成正确的纸牌图像。从网络套接字返回的卡名称与图片的文件名匹配，例如“地图”对应于图像“ map.jpg”。我正在尝试映射阵列并为阵列中的每个卡名创建一个图像标签。我读到最好的方法是使用require()，所以我尝试做类似的事情

//inside component
let cardImgs;
...
socket.on(RECEIVED_STARTING_HAND,(hand) => {
     cardImgs = hand.map(cardName => <img src= {require(`../../card_images/${cardName}.jpg`)}/>
})

...因此，稍后在我的组件中，我可以执行以下操作：

return (
 <div>
     <h1>My hand</h1>
        {cardImgs}
 </div>
  ...
)

但是，cardImgs无法呈现。在我对组件的return语句中，我测试了直接渲染图像，并且可以正常工作，例如

const map = "map"
return (
 <div>
     <h1>My hand</h1>
        {cardImgs}
 </div>
  ...
//this one renders!!!
<img src={require(`../../card_images/${map}.jpg`)} /> 
)

我用Create-React-App创建了我的react应用，我读了一些东西，说我应该重新配置我的webpack.config.js文件，但是随后我也读了一些东西，说我除非需要就不要碰它。我不确定为什么require()在我的组件的return语句中起作用时仍然起作用，但是在给定图像标签数组时却不起作用。我是否缺少某些东西，或者您对在React中动态加载图像的更好方法有任何建议？谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

create-react-app javascript reactjs reactjs