时间戳

首页 > 解决方案 > 在 React 应用程序中使用 require 加载图像

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

问题描述

我是 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 中动态加载图像的更好方法有什么建议？谢谢！

标签： javascriptreactjscreate-react-app

解决方案

如果您想从本地文件夹渲染图像，您可以使用导入语法导入您需要的图像，然后在您的 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>

)

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

推荐阅读