在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。

但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。

你能在ts文件中分享一下如何做到这一点吗?


当前回答

我找到的解决方案:在ReactJS项目中,在文件react-app-env.d中。你可以删除评论中的空格,比如:

之前

// / <reference types="react-scripts" />

/// <reference types="react-scripts" />

我希望能帮到你

其他回答

对我来说,当我在src/types/images.d.ts中放入以下一行时,它就工作了

声明模块'*.svg';

我用下面的方法导入图像

import {ReactComponent as WifiIcon} from '../../ assets/images/Wifi.svg';

在tsconfig.json

我有以下complierOptions

"compilerOptions": {
    "typeRoots": ["node_modules/@types", "src/types"]
}

希望它能帮助到别人。我使用的是最新版本的CRA。

我们已经实现了另一种方法:制作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;
}

看到源

我在网上寻找解决这个问题的办法。这个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应用。

如果没有其他的答案工作,尝试重新启动你的IDE(即VS Code)。对我来说,这就解决了问题。