无法在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

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

希望它能帮助到别人。

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

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

如果你使用webpack，安装svg-inline-loader，在webpack.config.js中添加该模块:

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
}

它在建造后工作良好。

如果你的IDE报告一个交互错误，它可以通过添加//@ts-ignore来解决:

//@ts-ignore
import logo from './logo.svg';

Svg-inline-loader webpack文档

在CRA应用程序中导入SVG文件

如果你想在CRA应用(create-react-app)中导入SVG文件，而不做任何配置，你可以使用以下方法之一:

方法1

import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />

方法2

import myIconFileName from './assets/images/my-icon.svg';
...    
<img src={myIconFileName} />

推荐文章