ReactJS 从项目加载图片，不工作

Question

我遇到了一个我无法解决的简单问题，我得到了一个“数组”，其中包含和“数组”，我想在其中显示第一张图片，

继承人的代码：

                        {Skills.map((item, index) => 

                            <Window key={index} className="col-md-3 m-2 ">

                                <CardFrame className="cardFrame-max cardFrame-size-md">

                                    <div className="row justify-items-center">

                                        <div className="col-8 offset-2">

                                            <p className="battle-shonen-color">{"Skill Name: " + item.name}</p>

                                            <img src={require('../../' + item.effects[0].icon)}></img>

                                            <p className="battle-shonen-color">{"Skill Shortcode: " + item.shortcode}</p>

                                            <p className="battle-shonen-color">{"Skill Description: " + item.quote}</p>

                                        </div>

                                    </div>

                                </CardFrame> 

                            </Window>

                        )}

它在它向我显示错误的标签处：“错误：找不到模块'./resources/img/icon/effects/Damage.png'”，

所以它确实加载了保存在数组中的字符串，但没有在前面添加'../../'

Answer 1

你能这样试试吗&nbsp;{Skills.map((item, index) =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Window key={index} className="col-md-3 m-2 ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardFrame className="cardFrame-max cardFrame-size-md">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="row justify-items-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-8 offset-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="battle-shonen-color">{"Skill Name: " + item.name}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={require(`../../${item.effects[0].icon}`)}></img>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="battle-shonen-color">{"Skill Shortcode: " + item.shortcode}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="battle-shonen-color">{"Skill Description: " + item.quote}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardFrame>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Window>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp;Run code snippet

Answer 2

在您的项目文件中导入您的图像。例如：import ImageName from '../../whatever.jpg';并在您的项目数组中使用它。[&nbsp; {&nbsp; &nbsp; icon: ImageName&nbsp; }]

Answer 3

&nbsp;&nbsp;&nbsp;&nbsp;{require(`../../${item.effects[0].icon}`)}