ReactJS Load Picture from Project, doesnt work somehow

Question

i got a simple problem which i cant resolve, i got an "array" which contains and "array" where i want to display the first Picture,

heres the code:

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

its at the tag where it shows me the error: "Error: Cannot find module './resources/img/icon/effects/Damage.png'" ,

so it does load the string saved in the array but doesnt add '../../' infront

This may help https://stackoverflow.com/a/39999421/6865416 – Francis Leigh Apr 02 '20 at 09:51 — Francis Leigh, Apr 02 '20 at 09:51

score 0 · Accepted Answer · answered Apr 02 '20 at 09:55

0

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

answered Apr 02 '20 at 09:55

Hagai Harari

2,767
3
11
23

Still same as above: Error: Cannot find module './resources/img/icon/effects/Damage.png' – Terraya Apr 02 '20 at 09:58
@Terraya what exactly is { item.effects[0].icon } ? – Hagai Harari Apr 02 '20 at 10:16
its a path "/resources/img/icon/Damage.png" – Terraya Apr 02 '20 at 10:40
{require(`../..${item.effects[0].icon}`)} – Hagai Harari Apr 02 '20 at 10:42

score 0 · Answer 2 · answered Apr 02 '20 at 09:56

Can you try like this

 {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

Already have tryed it, still getting same : Error: Cannot find module './resources/img/icon/effects/Damage.png' — Terraya, Apr 02 '20 at 09:57

score 0 · Answer 3 · answered Apr 02 '20 at 10:02

0

import your images in your items file. e.g. :

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

and use it in your items array.

[
  {
    icon: ImageName
  }
]

answered Apr 02 '20 at 10:02

BeHappy

3,705
5
18
59

Yes that approach wouldnt be bad but since i load the images from a Database Object, i wouldnt do that since its not recommendet :s – Terraya Apr 02 '20 at 10:07
if you load it from database, How it is in your react project? if you load in your app to have to set address from built files. e.g. the images load in /img/ folder in production mode. – BeHappy Apr 02 '20 at 10:14
Yes well, lets say , the Files are Stored in the Project Localy but the Database Object have stored the "Path" to the Stored file – Terraya Apr 02 '20 at 10:16
so as I said, see where assets path is in production and set your path in DB base on it. – BeHappy Apr 02 '20 at 10:39

ReactJS Load Picture from Project, doesnt work somehow

3 Answers3