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

你能这样试试吗

 {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>

                        )}

 Run code snippet

Answer 2

在您的项目文件中导入您的图像。例如：

import ImageName from '../../whatever.jpg';

并在您的项目数组中使用它。

[

  {

    icon: ImageName

  }

]

Answer 3

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