无法在typescript中导入svg文件

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

import logo from './logo.svg';

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

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

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

当前回答

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

如果你正在使用puglin slint，可能是他已经禁用了，认为这是一个评论，但不是为了阅读SVG，你需要这个类型脚本模块，只是禁用行和高兴

其他回答

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

对我来说，当我在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。

没有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格式则不需要。

我在尝试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"
  },

希望它能帮助到别人。

如果你正在使用Create-React-App启动器，请确保react-app-env.d。Ts包含如下行:

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

推荐文章