如何解决错误"Module not found: Can't resolve './undraw_Upload_image_re_svxx' in 'D:librefsrc'"？

Question

我在React项目中使用了一个插图，该项目存储在/src中，以及App.js。我像这样导入它:

import Illustration from "./undraw_Upload_image_re_svxx";
...
function App() {
...
return (
...
<img src={Illustration}/>
)
}

然而，我得到了这个错误:Module not found: Can't resolve './undraw_Upload_image_re_svxx' in 'D:librefsrc'。我可以直接将SVG复制到代码中，但这不是很美观。我怎么解决这个问题?

Answer 1

在使用CRA构建的React项目中，像.js和.jsx这样的常见扩展名是由webpack配置解析的，所以在导入这些文件时，你可以删除扩展名部分。但是在这里，由于您尝试导入svg文件，因此必须在import语句中也包含扩展部分。

import Illustration from "./undraw_Upload_image_re_svxx.svg";