无法在typescript中导入svg文件

在

typescript（*.tsx）

文件中，我无法使用以下语句导入svg文件：

import logo from './logo.svg';

Transpiler说：

[ts]找不到模块。/logo.svg。

我的svg文件只是

…

但是在

.js

文件中，我可以使用完全相同的import语句导入它，而不会出现任何问题。我想这与svg文件的类型有关，必须以某种方式为ts transpiler设置svg文件

你能分享一下如何在ts文件中实现这一点吗？

谢谢你指出使用

require（）

。因此，在我的情况下，应该是：

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

---

这在*.tsx文件中运行良好

如果使用webpack，可以通过创建自定义类型文件来实现

创建一个名为custom.d.ts的文件，其中包含以下内容：

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

将

custom.d.ts

添加到

tsconfig.json

中，如下所示

"include": ["src/components", "src/custom.d.ts"]

---

来源：

我们已经实现了另一种方法：制作SVG组件。我这样做是因为我在导入

import

s的同时使用commonJS

require

语句，这让我感到很不舒服。

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

---

希望它能帮助其他人。

添加一个类型正确的

custom.d.ts

文件（我在src dir的根路径上创建了它）（感谢）：

然后将其用作JSX标记：

函数f（）{
返回（）；
}

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

以前

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

//

之后

//

我希望能帮助您

//eslint禁用下一行间隔的注释
    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

/// 

如果您使用的是puglin slint，则可能是他禁用了，认为这是一条注释，而不是读取svg。您需要此类型脚本模块，只需禁用该行并高兴地使用n，我们需要延迟这些导入的类型。这需要一个custom.d.ts文件，该文件表示项目中TypeScript的自定义定义

让我们为.svg文件设置一个声明：

定制d.ts

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

---

---

这里，我们通过指定以.svg结尾的任何导入并将模块的内容定义为any来为svg声明一个新模块。

svg文件不是javascript，不能像javascript模块那样使用。您应该改为使用http请求加载这些文件。是否使用Webpack？这是我见过的唯一能理解这种

import

语句的东西。也许Webpack在JavaScript中允许了这一点，但在TypeScript文件中却没有同样的魔力。（我认为TypeScript本身不知道在这里做什么。）如果您正在使用Webpack，您可能需要共享您的Webpack配置以获得更多帮助。阅读更多关于此的内容，您可能可以执行

const logo=require（“./logo.svg”）或直接忽略错误。（我相信TS仍然应该输出正确的代码。）为什么，为什么Webpack/React不得不让事情复杂化？用
import
导入任何东西不是更简单吗。对于像我这样的新手来说，这些事情让我泄气。我们不是在2020年“自动配置”应该成为标准吗？很可能，您需要将其添加到tsconfig.json中的
include
部分。谢谢！我知道它一定包括在某个地方，但我无法想象它在哪里。甚至我都认为它是在tsconfig.json中，但我不知道怎么做。谢谢你的评论。我进行了搜索，发现：
“文件”：[“custom.d.ts”]
您可以通过键入内容来检查JSX组件的类型：
const content:React.FunctionComponent
是否可以使
custom.d.ts
文件全局工作，以便SVG可以位于与
custom.d.ts
文件不同的目录中？我得到一个错误“找不到模块”，除非它在同一个目录中。这不会导入文件的内容，而是将文件名作为字符串导入。我需要内容。如何获取文件的内容？
logo
的名称可能更好，因为它就是这样命名的。@Dharmatle我认为这是可以讨论的。另外，在问题中它被称为
logo
，因此它是对这个特定问题的更好的回答。@Dharmatle老实说，伙计，变量的名称已经离题太远了，为什么要为这样一件小事分心呢？我喜欢这个答案而不是创建自定义配置规则。唯一的问题是，如果有任何副作用的话，这在生产构建中工作得如何？在工作中遇到困难吗？请澄清？对于使用create-react应用程序和配置的eslint的人来说，这可能解决了这个问题。我没有找到对此的任何解释，但在我的情况下，它似乎起到了作用。知道为什么吗？啊！这对我有帮助，谢谢。
/// <reference types="react-scripts" />

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

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