无法在typescript中导入svg文件

Question

在typescript(*.tsx)文件中我无法使用以下语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts] cannot find module './logo.svg'. 我的svg文件只是<svg>...</svg>.

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

你能否分享如何在ts文件中使用它？

Answer 1

如果使用webpack,则可以通过创建自定义类型文件来完成此操作.

使用以下内容创建名为custom.d.ts的文件:

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

资料来源:https://webpack.js.org/guides/typescript/#importing-other-assets

Answer 2

我在互联网上搜索寻找解决这个问题的方法。这个 stackoverflow 问题成为了首要问题，但没有一个答案对我有用。

最后，我通过尝试几种不同的技术找到了解决方案。

1. ./globals.d.ts在项目的根目录中与您所在的位置/级别相同的位置创建一个文件./tsconfig.json。

2. 在该./globals.d.ts文件中，添加以下内容：

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

这正确地将 导入.svg为字符串，这是我在评分最高的答案中注意到的一个问题。

3. tsconfig.json使用以下内容更新您的：

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

就是这样 - 这让它在我的案例中发挥作用。我会注意到 - 这是在 VanillaJS 应用程序中。

Answer 3

添加一个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 标签：

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Answer 4

感谢smarx指出使用require().所以在我的情况下它应该是:

const logo = require("./logo.svg") as string;

在*.tsx文件中工作正常

Answer 5

您可以以与create-react-app相同的方式声明 svgs 模块：

反应应用程序.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;
}

查看来源

Answer 6

找不到模块或其相应的类型声明 | 无法在打字稿中导入 svg 文件

1. 在 ./custom.d.ts 文件中添加以下内容：

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

Answer 7

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

Answer 8

如果您使用Create-React-App启动器，请确保react-app-env.d.ts包含以下行：

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

Answer 9

如果您使用vite，请添加以下内容compilerOptions来tsconfig.json修复我的错误：

  "compilerOptions": {
    "types": ["vite/client", "node"],

Answer 10

我找到的解决方案：在 ReactJS 项目中，在文件 react-app-env.d.ts 中，您只需删除注释中的空格，例如：

前

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

后

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

我希望能帮助你

Answer 11

希望！这会对某人有所帮助。

实际上，我尝试了所有步骤，但我们必须了解一件事，您必须将 custom.d.ts 文件创建到相应的 SVG 导入文件夹中。

.ts 配置文件

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@static/*": ["src/static/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*", "src/static/optional.d.ts"],
  "exclude": ["node_modules", "build"]
}

可选.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;
}

最后是公共导出文件：

import Logo from './images/logo.svg';
import BellDot from './images/bell-dot.svg';
import Logout from './images/logout.svg';
import pageNotFound from './images/page-not-found.png';

export {
    Logo,
    BellDot,
    pageNotFound,
    Logout
}

为了更好的想法：

Answer 12

我在尝试 REACT + 打字稿教程时遇到了同样的问题。
对我有用的是以下导入语句。

import * as logo from 'logo.svg'

这是我在 package.json 中的依赖项。

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

希望它可以帮助某人。