javascript - React 动态导入 Svg 文件
问题描述
我的项目文件夹中有以下结构:
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
现在您可以从应用程序中的任何位置导入。
推荐阅读
- python - 在这种情况下如何避免多次写入 csv 标头?
- django - Django:非主键自动递增字段
- ruby-on-rails - 无法在 Ruby on Rails 中抓取 Linkdin 搜索结果?
- android - viewpager2 的视图绑定错误
- html - 背景随着任何额外的位置、大小等代码消失,但在没有的情况下可见
- crystal-lang - Crystal 类中的 < 符号是做什么用的?
- android - Android中的平均堆栈环境
- python - 无法安装 django,我收到 JWT 错误
- php - jQuery toggle() 事件在 magento 2 中不起作用
- flutter - Flutter Web 保存图片