Not understanding why my element.url property can t be read by require function

Question

My goal is to display my elements URL property when i map on my array, i tryed to use 'require' according to other post on this website but for some reason it only works when i write directly the strings into my map.

i have the "images" folder into "src" folder. The file i display on bottom is in src/components thats why i used "../" but also tryed "./" just in case , still didnt work

this is my whole array i'd like to display properly:

const [products, setProducts]= useState([
        {key:1 ,name:'Structure Deck Assaut d Albaz VF',        price:'12,99', url:'../images/DSAlbaz.png'},
        {key:2 ,name:'Grands Créateurs Booster Box VF',         price:'84,91', url:'../images/grandscreateurs.png'},
        {key:3 ,name:'Coffret Arsenal Mystérieux VF',           price:'14,99', url:'../images/arsenalmyst.png'},
        {key:4 ,name:'La Bataille du Chaos Booster Box VF',     price:'84,99', url:'../images/battaillechaos.png'},
        {key:5 ,name:'Fantômes du passé saison 2 VF',           price:'24,99', url:'../images/fantome2nd.png'},
        {key:6 ,name:'Frères de Légende Booster Box VF',        price:'89,99', url:'../images/freresdelegende.png'},
        {key:7 ,name:'Coffret Or Maximum VF',                   price:'24,99', url:'../images/OrMaximum.png'},
        {key:8 ,name:'Coffret Or Maximum EN',                   price:'24,99', url:'../images/OrMaximum.png'},
    ])

this is my array maping that doesnt work as intended:

if(listToDisplay === 0){
        displayList = products.map(e =>{
            return<div className='product__card' key={e.key}>
                        <img className='product__picture' src={require(e.url)} alt='SD assaut d albaz'></img>
                        <h3>{e.name}</h3>
                        <p>{e.price}$</p>
                        <div className='buybutton'>Ajouter au panier</div>
                  </div>
        })}

error code : Uncaught Error: Cannot find module '../images/grandscreateurs.png' seems related to webpack from what i found

so i found another thread and tryed this, with import :

import Logo from '../images/grandscreateurs.png'

then tranform my object value like this :

{key:1 ,name:'Structure Deck Assaut d Albaz VF',        price:'12,99', url:Logo},

error message : Uncaught Error: Cannot find module '/static/media/grandscreateurs.7cf37936cedc1da9b626.png'

i am kinda lost now since i don't know how to interact with webpack very well and don't understand how to fix it when i read the thread. thanx you for your understanding and a possible step by step solution.

Answer 1

If you already used the import, so don't use the require in img tag. Try this

import Logo from '../images/grandscreateurs.png'

...

<img className='product__picture' src={Logo} alt='SD assaut d albaz' />