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

Question

我看到这个答案建议导入图像的语法如下所示(注释掉).在我的情况下,它没有成功(抱怨在该文件中找不到任何模块),我不得不切换到当前活动的语法.

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

我可以想象的差异是我正在使用TypeScript(通过awesome- typescript -loader转换我的TSX 并加载我的PNG 文件加载器),他们似乎使用JSX.但就我的理解而言,这一切都转化为普通的JS并最终要求.

作为React的菜鸟,我不确定这种差异的原因是什么,但我也不确定要谷歌如何调查自己.

Answer 1

对于typescript而言,这比webpack本身更具问题,您可能需要在声明文件上声明模块.

创建一个 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 会抛出错误，因为您没有告诉它这是可能的。