。import logo from './logo.svg';
转译器显示:[ts] 找不到模块"./logo.svg"。
我的svg文件只是<svg>...</svg>。
但在.js文件中，我可以使用完全相同的导入语句轻松导入它，没有任何问题。我认为这与必须以某种方式设置ts转译器的svg文件类型有关。
请问如何使此功能在ts文件中正常工作?
如果你使用webpack，可以通过创建一个自定义的类型文件来实现这一点。
创建一个名为custom.d.ts的文件，其内容如下：
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
custom.d.ts 添加到 tsconfig.json 中，如下所示。"include": ["src/components", "src/custom.d.ts"]
来源: https://webpack.js.org/guides/typescript/#importing-other-assets
include 部分中。 - Frederik Krautwald"files": [ "custom.d.ts" ]。 - Shil Nevadoconst content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;。 - RedMattcustom.d.ts文件能否在全局范围内工作，以便SVG可以放置在不同于custom.d.ts文件的目录中？除非两者在同一目录中，否则会出现"无法找到模块"的错误。 - Nic Scozzarocreate-react-app 2+：文档在正确的类型中添加一个custom.d.ts文件（我在我的src目录的根路径上创建了它），感谢RedMatt：
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
安装svg-react-loader或其他适用的，然后：
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'
然后只需将其用作JSX标记：
function f() {
return (<MySVG />);
}
我在互联网上搜索解决这个问题的方案。这个stackoverflow问题是最高的，但是没有一个答案适用于我。
最终，通过尝试几种不同的技术，我成功地找到了解决方案。
在项目的根目录下，与./tsconfig.json同一级别的位置中创建一个./globals.d.ts文件。
在./globals.d.ts文件中添加以下内容：
declare module '*.svg' {
const content: string;
export default content;
}
这样可以将.svg文件正确地导入为字符串，这是我在排名第一的答案中注意到的问题。
tsconfig.json文件如下：{
"files": ["globals.d.ts"]
}
就是这样 - 在我的情况下，这样做使它能够运行。我要注意的是 - 这是在一个纯JS应用程序中。
我找到的解决方案：在 ReactJS 项目中的 react-app-env.d.ts 文件中，只需删除注释中的空格，例如：
改变前：
// / <reference types="react-scripts" />
之后
/// <reference types="react-scripts" />
我希望能帮助你
/// 更改为 // /。你可以将其改回来并添加忽略 (/* eslint-disable spaced-comment */)，然后问题就解决了。 - David您可以像create-react-app一样声明SVG模块：
react-app.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;
}
查看 源代码
export const ReactComponent 然后使用 export default src？难道不应该是 export default ReactComponent 吗？ - vhflatexport const ReactComponent = ...，就可以为我工作，谢谢。 - David Reartedeclare module '*.svg' {
const content: string;
export default content;
}
对于我而言，上述所有解决方案都不能单独解决我的问题，因为我当前的项目中没有使用Webpack。
通过查看日志输出，我找到了下面的方法可以解决我的问题，它不需要创建文件(custom.d.ts)、修改配置或者安装新依赖:
const logo: string = require("../assets/images/logo.svg").default;
<img src={logo} alt="logo" />
.default，但对于png格式不需要。Create-React-App入门，确保react-app-env.d.ts文件包含以下内容：/// <reference types="react-scripts" />
vite，请将以下 compilerOptions 添加到 tsconfig.json 中，这样可以为我解决错误： "compilerOptions": {
"types": ["vite/client", "node"],
tsconfig.json 中出现了以下错误：无法找到“node”的类型定义文件。该文件在程序中是因为：编译器选项中指定了类型库“node”的入口点。所以我只是从列表中删除了“node”，然后它就可以工作了。谢谢！ - George."types": ["vite/client"]就可以了。谢谢！ - Raul Renevite有点奇怪——模板项目可以导入SVG没有问题，但我的大型项目却出现了错误。可能是依赖或配置冲突了吧？不管怎样，@RaulRene的建议解决了这个问题。 - Partly Cloudy
import语句的工具。也许是Webpack在你的JavaScript文件中实现了这个功能，但在TypeScript文件中却没有做同样的魔法。（我认为TypeScript本身并不知道该怎么处理这里的代码。） - user94559const logo = require("./logo.svg");或者直接忽略这个错误。(我相信TypeScript仍然会输出正确的代码。) - user94559import导入不是更简单吗？对于像我这样的新手来说，这些东西让我感到沮丧。我们不是已经进入了2020年，自动配置应该成为常态了吗？ - SimpleGuy