无法在typescript中导入svg文件

在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" />

我希望能帮到你

其他回答

如果你使用的是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 />); 
}

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

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

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

如果你使用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文档

推荐文章