React使用本地data.json存储的图片路径导入时找不到模块如何解决？

错误原因 #

你拼接路径的写法../.' + currentPlanet.images.planet会生成.././assets/planet-mercury.svg格式的路径，webpack在处理动态require时会自动标准化相对路径，.././会被解析为./../，和你预期的../../assets/xxx.svg路径不一致，同时webpack处理动态require需要明确的静态路径前缀来识别需要打包的资源范围，完全动态的拼接路径也会导致模块查找失败。

解决方案 #

方案1：修正路径拼接逻辑 #

先去掉json存储路径开头的./前缀，再拼接正确的静态上级路径：

const [currentPlanet,setCurrentPlanet]=useState(data[0])
const {name} = useParams();
useEffect(() => {
    const planet = data.find((item)=>item.name===name)
    setCurrentPlanet(planet);
}, [name])
// 移除路径开头的./前缀
const purePath = currentPlanet.images.planet.replace(/^\.\//, '')
// 拼接固定静态前缀，webpack会自动打包../../assets下的所有相关资源
const photo = require(`../../${purePath}`).default
return (
    <section id={planetStyle.planet}>
        <div className="container">
            <div>
                <img alt={currentPlanet.name} src={photo} />
            </div>
        </div>
    </section>
)

方案2：使用public目录托管静态资源 #

把所有svg图片放到项目public目录的assets文件夹下，不需要使用require导入，直接拼接绝对路径使用即可：

// 直接使用public目录下的绝对路径，无需require
const photo = `/${currentPlanet.images.planet}`

这种方式不需要处理相对路径的层级问题，更适合大量静态图片的场景。

内容的提问来源于stack exchange，提问作者Ahmed Elhoseny