imagereactjsjsxparceljs

how to Import an image in React with parcel-bundle

I want to add an image with a require statement.

But I got the following error:

Cannot find module '../../../assets/skillName.png'

I build app using parcel-bundle and I don't use webpack.
The path to the image is correct, because if I use a static link, it works well:

<img src={require(`../../../assets/skillName.png`)}/>
Solution

  • Try doing it this way:

    {Object.keys(this.props.skillset).map((skill) => {
    let source = require(`../../../assets/${skill}.png`);
     return (
       <div key={skill}>
         <img src={source}/>
        </div>
     )
   })}