我看到this answer 建议导入图像的语法如下所示（已注释掉）。就我而言，它没有成功（抱怨在该文件中找不到模块），我不得不切换到当前处于活动状态的语法。
// import Author from "../assets/author.png";
var Author = require("../assets/author.png");
我可以想象的不同之处在于我使用的是 TypeScript（通过 awesome-typescript-loader 转译我的 TSX 并加载我的 PNG file-loader）而且它们看起来使用 JSX。但就我的理解而言，这一切都转译为纯 JS，最后 require。
作为 React 的菜鸟，我不确定造成这种差异的原因是什么但也我不知道该用谷歌搜索什么来调查自己。
【问题讨论】：
标签： reactjs typescript webpack webpack-4
这更多是 typescript 的问题，而不是 webpack 本身，您可能需要在声明文件中声明模块。
创建一个declarations.d.ts
更新你的 tsconfig.json
"include": [
"./declarations.d.ts",
],
把这个放在那个文件上：
declare module '*.png';
错误可能消失了。
【讨论】：
你可以像这样为你的图片声明一个模块：
declare module "*.png" {
const value: any;
export default value;
}
然后，您将能够像这样导入您的图像：
import AuthorSrc from "../assets/author.png";
这是因为 webpack 不支持开箱即用的图像导入。因此，您需要在 webpack 配置文件中为此添加规则。当您添加新规则时，TypeScript 不会自动知道这一点，因此您需要声明一个新模块来解决此问题。如果没有该模块，您将能够导入图像，但 TypeScript 会抛出错误，因为您没有告诉它是可能的。
【讨论】：
这个问题与 webpack 或任何 bundler 无关，也不是 typescript 的问题。
Typescript 声明 `require("path") 是一种将模块包含到当前模块范围内的方法，同时它也可以用于读取一些随机文件（例如 json 文件）。
正如 Vincent 和 Playma256 所指定的，您可以声明一个模块通配符以匹配某些文件类型，因此您可以将其作为导入语句导入。但你真的不需要这样做。如果您尝试导入 png 或 json 文件，Typescript 不会给您错误（tslint 可能，但这取决于您的配置）。
顺便说一句，如果您的声明位于 tsconfig.json 中定义的项目的源文件夹中，则无需按照 Playma256 的规定包含它。
我在 node 中创建了一个示例项目供您测试：
【讨论】：
declare module "*.xxx"; 是否等同于 declare module "*.xxx" { const v: any; export default v }？不，第一个只是用该名称声明模块的存在，第二个告诉 typescript 它需要默认捕获已导出的实例或定义。
我认为你可以用 Webpack&&typescript 解决这个问题。webpack 的官方网页在
https://webpack.js.org/guides/typescript/
我自己也试过这个
https://github.com/reactpersopnal/webpack-root/tree/feature/typescript
原因是您想在 TypeScript 中使用非代码资产，因此我们需要为 webpack 的这些导入延迟类型。
您可以简单地添加 custom.d.ts。
declare module "*.jpg" {
const content: any;
export default content;
}
【讨论】：