无法在typescript中导入svg文件

在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

其他回答

找不到模块或对应的类型声明|无法在typescript中导入svg文件

在。/custom.d中。Ts文件，添加这个:

declare module '*.svg' {
  const content: string;
  export default content;
}

如果你有任何困惑，请观看这个视频。 https://www.youtube.com/watch?v=Skhgdp7R9Tk

如果你使用的是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应用。

我们已经实现了另一种方法:制作svg组件。我这样做是因为它困扰我，我使用commonJS的要求语句与我的导入。

推荐文章