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

Question

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

Answer 1

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

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

Demo

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>

)

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