为什么我必须在 React 中使用 "require" 而不是 "import from" 作为图像？

Question

我看到建议使用如下所示的导入图像语法（已注释掉）。就我而言，它没有成功（抱怨在该文件中找不到模块），我不得不切换到当前活动的语法。

// import Author from "../assets/author.png";
var Author = require("../assets/author.png");

我能想象到的区别是我正在使用 TypeScript（通过 awesome-typescript-loader 转译我的 TSX 并加载我的 PNG file-loader) 而且他们似乎使用 JSX。但就我的理解而言，它最终都转换为纯 JS 和 require。

作为 React 的菜鸟，我不确定造成这种差异的原因是什么 ，而且 我不确定要 google 调查什么我自己。

Answer 1

与 webpack 本身相比，Typescript 的问题更大，您可能需要在声明文件中声明模块。

创建 declarations.d.ts

更新您的 tsconfig.json

"include": [
    "./declarations.d.ts",
],

把这个放在那个文件上：

declare module '*.png';

错误可能消失了。

Answer 2

您可以像这样为图像声明一个模块：

declare module "*.png" {
  const value: any;
  export default value;
}

然后，您就可以像这样导入图像了：

import AuthorSrc from "../assets/author.png";

发生这种情况是因为 webpack 不支持开箱即用的图像导入。所以你需要在 webpack 配置文件中为此添加一条规则。当你添加一个新规则时，TypeScript 不会自动知道，所以你需要声明一个新模块来解决这个问题。没有该模块，您将能够导入图像，但 TypeScript 会抛出一个错误，因为您没有告诉它是可能的。

Answer 3

这个问题与 webpack 或任何捆绑器无关，也不是 typescript 的问题。

Typescript 声明 `require("path") 是一种将模块包含到当前模块范围内的方法，同时它也可用于读取一些随机文件（例如 json 文件，例如）。

正如 Vincent 和 Playma256 所指出的，您可以声明一个模块通配符来匹配某些文件类型，因此您可以将其作为导入语句导入。但你真的不需要这样做。如果您尝试导入 png 或 json 文件，Typescript 不会给您错误（tslint 可能会，但这取决于您的配置）。

顺便说一下，如果您的声明在 tsconfig.json 中定义的项目源文件夹中，则不需要按照 Playma256 的规定包含它。

我已经在 node 中创建了一个示例项目供您测试：

https://github.com/rodrigoelp/typescript-declare-files

Answer 4

我觉得你可以用webpack解决这个问题&&typescript.Thewebpack官网有介绍 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;
}

为什么我必须在 React 中使用 "require" 而不是 "import from" 作为图像？

Why do I have to use "require" instead of "import from" for an image in React?

typescript

reactjs

webpack

webpack-4