Problem Description: the error cannot find mouse ‘is reported when the picture path is introduced

const listArr = [
    {
        "title": "title 1",
        "icon" : "./../../img/icon1.png"
    },
    {
        "title": "title 2",
        "icon" : "./../../img/icon2.png"
    },
    {
        "title": "title 3",
        "icon" : "./../../img/icon3.png"
    },
];



listArr.map((item,index) => {
    return (
        <li key={index}>
            <img src={require(item.icon)} alt="" />    //error Cannot find moudle '.'
            {item.title}
        </li>
    )
})

Cause analysis: path variables cannot be written directly in require, but need to be written in path format

Path variables cannot be written directly in require. They need to be written in path format, which has been tested (<img src={require(`./../../img/${item.icon}`)} alt=”” />） That’s OK

Solution: < img src={require(`./../../img/${item.icon}`)} alt=”” />

const listArr = [
    {
        "title": "title 1",
        "icon" : "icon1.png"
    },
    {
        "title": "title 2",
        "icon" : "icon2.png"
    },
    {
        "title": "title 3",
        "icon" : "icon3.png"
    },
];



listArr.map((item,index) => {
    return (
        <li key={index}>
            <img src={require(`./../../img/${item.icon}`)} alt="" />
            {item.title}
        </li>
    )
})