Question

我看到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的菜鸟，我不确定造成这种差异的原因是，但是我不确定要用Google搜索什么来调查自己。

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会引发错误，因为您没有告知可能。

Answer 3

此问题与webpack或任何捆绑程序无关，并且与打字稿无关。

Typescript指出`require（“ path”）是一种将模块包含在当前模块范围内的方法，同时它还可用于读取一些随机文件（例如json文件）。 / p>

按照Vincent和Playma256的指定，您可以声明模块通配符以匹配某些文件类型，因此可以将其作为导入语句导入。但是您实际上并不需要这样做。如果您尝试导入png或json文件，Typescript不会给您错误（tslint可以，但这取决于您的配置）。

顺便说一句，如果声明位于tsconfig.json中定义的项目的源文件夹中，则无需按照Playma256的指定将其包括在内。

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

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

Answer 4

我认为您可以使用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;
}

为什么我必须在React中使用“ require”而不是“ import from”来导入图像？

4 个答案: