无法在typescript中导入svg文件

感谢smarx指出使用require()。所以在我的例子中，它应该是:

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

在*中工作得很好。tsx文件

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

我们已经实现了另一种方法:制作svg组件。我这样做是因为我在使用commonJS的require语句和我的__abc1语句时感到困扰。

import * as logo from 'logo.svg'

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

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

希望它能帮助到别人。

• 如果你正在使用create-react-app 2+: 文档

添加一个具有正确类型的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 />);
}

我找到的解决方案:在ReactJS项目中，在文件react-app-env.d中。你可以删除评论中的空格，比如:

之前

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

后

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

我希望能帮到你

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

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

你可以像create-react-app一样为svgs声明模块:

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;
}

看到源

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

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

希望!这会帮助到别人。

实际上，我尝试了所有的步骤，但有一件事我们必须理解，您必须将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"]
}

optional.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
}

更好的主意是:

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

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

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

对我来说，我必须在tsconfig*.json中包含react-app-env.d.ts:

  "include": [
"src/Router.tsx",        // my main entry point
"src/global.d.ts",       // global stuff
"src/react-app-env.d.ts" // react global stuff
]

我在网上寻找解决这个问题的办法。这个stackoverflow问题是最重要的，但没有一个答案对我有用。

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

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

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

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

这正确地将.svg导入为字符串，这是我在顶级的回答中注意到的问题。

3. 用以下语句更新你的tsconfig.json:

{
"files": ["globals.d.ts"]
}

就是这样，这对我来说很管用。这是一个VanillaJS应用。

对我来说，当我在src /类型/ images.d.ts中放入以下一行时，它就工作了

declare module '*.svg';

我用下面的方法导入图像

import { ReactComponent as WifiIcon } from '../../../assets/images/Wifi.svg';

在tsconfig.json

我有以下complierOptions

"compilerOptions": {
"typeRoots": ["node_modules/@types", "src/types"]
}

希望它能帮助到别人。我使用的是最新版本的CRA。

找不到模块或对应的类型声明|无法在typescript中导入svg文件

1. 在。/custom.d中。Ts文件，添加这个:

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

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