我的项目文件夹中有以下结构：
src
|
-> assets
|
-> general-icons
|
pointer-arrow.svg
|
-> components
|
-> lazy-loader
|
LazyLoader.tsx
LazyLoader 是一个功能性反应组件，我在其中动态导入一个组件，在本例中为 svg 文件
import React from 'react';
export default function LazyLoader(path: string) {
return React.lazy(() => import(path));
}
'path' 属性是一个字符串，其中包含 svg 文件的相对路径：
src/assets/general-icons/pointer-arrow.svg
而pointer.svg 是一个普通的svg：
<svg version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
当我调用传递路径作为参数的 LazyLoader 组件时，它给出了一个错误，因为它找不到 svg 模块：
Error: Cannot find module 'src/assets/general-icons/pointer-arrow.svg'
任何人有任何想法是怎么回事？
默认情况下，绝对导入路径不起作用。您的应用是否使用 create-react-app 进行引导？在项目的根目录创建一个 jsconfig.json 文件：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
现在，您可以从assets/general-icons/pointer-arrow.svg应用程序的任何位置导入。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句