在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:
import logo from './logo.svg';
Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。
但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。
你能在ts文件中分享一下如何做到这一点吗?
在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:
import logo from './logo.svg';
Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。
但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。
你能在ts文件中分享一下如何做到这一点吗?
当前回答
找不到模块或对应的类型声明|无法在typescript中导入svg文件
在。/custom.d中。Ts文件,添加这个:
declare module '*.svg' {
const content: string;
export default content;
}
如果你有任何困惑,请观看这个视频。 https://www.youtube.com/watch?v=Skhgdp7R9Tk
其他回答
我在尝试REACT + typescript教程时也遇到了同样的问题。 对我有用的是下面的重要陈述。
import * as logo from 'logo.svg'
下面是我在package.json中的依赖项。
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts-ts": "3.1.0"
},
希望它能帮助到别人。
在CRA应用程序中导入SVG文件
如果你想在CRA应用(create-react-app)中导入SVG文件,而不做任何配置,你可以使用以下方法之一:
方法1
import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />
方法2
import myIconFileName from './assets/images/my-icon.svg';
...
<img src={myIconFileName} />
我们已经实现了另一种方法:制作svg组件。我这样做是因为它困扰我,我使用commonJS的要求语句与我的导入。
你可以像create-react-app一样为svgs声明module:
react-app.d.ts
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
看到源
我找到的解决方案:在ReactJS项目中,在文件react-app-env.d中。你可以删除评论中的空格,比如:
之前
// / <reference types="react-scripts" />
后
/// <reference types="react-scripts" />
我希望能帮到你