在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文件中分享一下如何做到这一点吗?
当前回答
感谢smarx指出使用require()。所以在我的例子中,它应该是:
const logo = require("./logo.svg") as string;
在*中工作得很好。tsx文件
其他回答
你可以像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;
}
看到源
我在尝试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"
},
希望它能帮助到别人。
没有webpack和custom.d.ts的解决方案
对我来说,上面的解决方案单独一个都不起作用。因为我在目前的项目中没有使用Webpack。
我研究了日志中的输出,然后使用以下方式,无需创建文件(custom.d.ts),更改配置或安装新的依赖项:
const logo: string = require("../assets/images/logo.svg").default;
<img src={logo} alt="logo" />
对于svg格式,您需要添加.default,但对于png格式则不需要。
如果没有其他的答案工作,尝试重新启动你的IDE(即VS Code)。对我来说,这就解决了问题。
对我来说,我必须包含react-app-env.d。tsconfig*.json:
"include": [
"src/Router.tsx", // my main entry point
"src/global.d.ts", // global stuff
"src/react-app-env.d.ts" // react global stuff
]