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

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

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

创建一个。/global .d。Ts文件在你的项目的根目录，在你的。/tsconfig文件的同一位置/级别。json。 在。/globals.d中。Ts文件，添加这个:

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

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

更新您的tsconfig。Json格式:

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

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

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

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

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

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

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

看到源

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