在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文件中分享一下如何做到这一点吗?
当前回答
没有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格式则不需要。
其他回答
如果你使用的是create-react-app 2+: docs
添加一个custom.d.ts文件(我在src目录的根路径上创建的),使用正确的类型(感谢RedMatt):
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
安装svg-react-loader或其他,然后:
使用它作为主要的svg加载器 或者如果你正在迁移一个代码库,并且不想接触工作部分(JS),请在导入时指定加载器:
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'
然后将其用作JSX标记:
function f() {
return (<MySVG />);
}
感谢smarx指出使用require()。所以在我的例子中,它应该是:
const logo = require("./logo.svg") as string;
在*中工作得很好。tsx文件
我在网上寻找解决这个问题的办法。这个stackoverflow问题是最重要的,但没有一个答案对我有用。
最后,我通过尝试一些不同的技术找到了解决方案。
创建一个。/global .d。Ts文件在你的项目的根目录,在你的。/tsconfig文件的同一位置/级别。json。 在。/globals.d中。Ts文件,添加这个:
declare module '*.svg' {
const content: string;
export default content;
}
这正确地将.svg导入为字符串,这是我在排名最高的答案中注意到的一个问题。
更新您的tsconfig。Json格式:
{
"files": ["globals.d.ts"]
}
就是这样,这对我来说很管用。这是一个VanillaJS应用。
你可以像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;
}
看到源
如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:
/// <reference types="react-scripts" />