Mam prosty problem, którego nie mogę rozwiązać, mam „tablicę”, która zawiera i „tablicę”, w której chcę wyświetlić pierwsze zdjęcie,

Oto kod:

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

Jest w tagu, gdzie pokazuje mi błąd: "Błąd: nie można znaleźć modułu './resources/img/icon/effects/Damage.png'",

Więc ładuje łańcuch zapisany w tablicy, ale nie dodaje „../../” na początku

0
Terraya 2 kwiecień 2020, 12:49

3 odpowiedzi

Najlepsza odpowiedź

    {require(`../../${item.effects[0].icon}`)}
0
Hagai Harari 2 kwiecień 2020, 09:55

Możesz spróbować w ten sposób

 {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
0
Kesav 2 kwiecień 2020, 09:56

Zaimportuj swoje obrazy do pliku elementów. na przykład :

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

I użyj go w swojej tablicy elementów.

[
  {
    icon: ImageName
  }
]
0
BeHappy 2 kwiecień 2020, 10:02