Can't load local img in react using require

Question

I would like to render local images inside a map loop.

I have seen in many posts that I should use require

const urlBase = './../../assets/';
const CompList = (props) => {
    return props.skills.map((elm, index) => {
        console.log(`${urlBase}${elm.imageName}`)
        return <Chip
            key={`comp-${index}`}
            avatar={<Avatar alt="Angular" src={require(`${urlBase}${elm.imageName}`)} />}
            label={elm.techno}
        />
    })
}

But I'm getting this error

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

The app was generated using create-react-app

Answer 1

You can do this way -

const imageToShow = require('../path-to-the-file.extension');

<Chip
  key={`comp-${index}`}
  avatar={<Avatar alt="Angular" src={imageToShow} />}
  label={elm.techno}
  />