在 React 应用程序中使用 require 加载图像

Question

我是 React 的新手，我正在尝试创建一个涉及卡片的游戏，其中 websocket 返回一组卡片名称，在前端我从本地图像目录生成正确的卡片图像。 websocket返回的卡名与图片的文件名匹配，如“map”对应图片“map.jpg”。 我正在尝试在阵列上 map 并为阵列中的每个卡名创建一个图像标签。 我读到最好的方法是使用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 中动态加载图像的更好方法有什么建议？ 谢谢！

Answer 1

我建议在渲染中简单地处理hand项目。 当您更新该值时，将触发渲染并创建您的图像。

{hand.map((cardName, index) => (
      <img key={cardName} src={`pathtoserver/card_images/${cardName}.jpg`}/>
     ))}

演示

Answer 2

如果您想从本地文件夹渲染图像，您可以使用导入语法导入您需要的图像，然后在您的 img 标签中使用它

import card1 from '../you/path/to/image.png';
import card2 from '../you/path/to/image.png';
import card3 from '../you/path/to/image.png';

const cards = {
    nameToCard1: card1,
    nameToCard2: card2,
    nameToCard3: card3,
}

在您的套接字方法中：

socket.on(RECEIVED_STARTING_HAND, (hand) => {
cardImgs = hand.map(cardName => cards[cardName] />

})

并在您的渲染方法中：

return (
<div>
    <h1>My hand</h1>
    <ul>
        {cardImgs.map((img) => <li><img key={img} src={img} /></li>)}
    </ul>
</div>

)

我希望这对你有帮助，祝你有美好的一天。