关于reactjs：使用React，Typescript和Webpack显示静态图像


Displaying a static image using React, Typescript and Webpack

我正在尝试使用webpack和webpack-dev-server在React组件中显示图像作为项目的一部分。

到目前为止，我已经完成了以下步骤：

  • 使用npm安装文件加载器
  • 更新了webpack.config.js以添加图像文件的加载器
  • 将我想要的图像导入组件
  • 在我的img标签中使用了导入

采取了这些步骤后，webpack编译失败并显示"找不到模块"错误：

1
2
ERROR in [at-loader] ./src/components/App.tsx:4:26
    TS2307: Cannot find module '../images/kitten-header.jpg'.

我的文件夹结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/dist
   /images
      kitten-header.jpg
   bundle.js
   bundle.js.map
/node_modules
   (content ignored for brevity)
/src
   /components
      App.tsx
   /images
      kitten-header.jpg
   /styles
      App.less
   index.tsx
index.html
package.json
tsconfig.json
webpack.config.js

我添加到webpack.config.js的新加载器是：

1
test: /\\.(jpe?g|gif|png|svg)$/, loader:"file-loader?name=./images/[name].[ext]"

我已将图像文件导入App.tsx中，如下所示：

1
import kittenHeader from '../images/kitten-header.jpg';

...并在img标签中使用了导入，如下所示：

1
<img src={ kittenHeader } />

注意：提供了webpack.config.js和App.tsx的全文，直到我更接近答案并意识到它们不相关为止(请参阅更新1)。

我假设我在导入的相对路径方面犯了一些非常琐碎的错误。可以想象，我尝试了多种选择。

谁能提供一些见识？

作为参考，由于我不断遇到与错误版本的Webpack有关的文章和问题，以下是我的版本：

  • 反应15.5.4
  • Webpack 2.6.1
  • Webpack开发服务器2.4.5
  • TypeScript 2.3.2

更新1：2017.06.05
因此，通过查看这个SO问题以及这篇在Medium上的帖子，我已经能够确定问题不在于我如何使用webpack，而在于我正在使用TypeScript。该错误是由于打字稿编译器不知道什么是.jpg文件而导致的打字稿错误。

显然，我将需要提供d.ts文件或使用require语句。

差不多了...

相关讨论

对于常规需求，这就是我在tsx文件中使用它的方式：

1
2
3
4
5
const logo = require('../assets/logo.png');

...

<img alt='logo' style={{ width: 100 }} src={String(logo)} />

希望这可以帮助。 import ing对我也不起作用。

除了mcku的答案，您还可以通过以下方式使用导入：

1
2
3
4
// @ts-ignore
import * as kittenHeader from '../images/kitten-header.jpg';
...
<img alt='logo' style={{ width: 100 }} src={logo} />

尽管您必须忽略警告。

这就是我的工作方式：

1
2
3
4
5
6
7
8
// This declaration can be move in some common .d.ts file, will prevent tslint from throwing error
declare function require(path: string);

const SampleComponent = () => (
 
    <img src={require('./styles/images/deadline.png')} alt="Test" />
 
);

您在答案中提出的方法最终将为放置在组件中的每个图像文件编写模块声明。

在src目录中的任何位置添加一个打字稿定义文件，并将其命名为image.d.ts。
导出jpeg文件的模块定义，如下所示：

1
export module"*.jpg";

错误TS2307: Cannot find module '../images/kitten-header.jpg'突出表明TypeScript编译器无法理解.jpg文件的导入。

Webpack配置很好，这是由尽管编译错误但已将映像文件成功复制到dist文件夹所证明的。

有两种方法可以解决此问题。

首先，我们可以使用" require"语句绕过TypeScript导入。为此，导入...

1
import kittenHeader from '../images/kitten-header.jpg';

...可以用需求代替...

1
const kittenHeader = require('../images/kitten-header.jpg');

...这应该是所需要的。

请注意，就我而言，我还需要安装一些类型来支持'require'语句。没有这些，我将得到一个TS2304: Cannot find name 'require'错误。

最初我使用@types/node，如该SO答案中所述，但@EvanSebastian指出该节点旨在支持编写NodeJS模块，这不是我正在做的事情(请参阅问题注释)。

我按照建议尝试了@types/webpack-env，但是这导致了我的图像标签的src属性出现TS2322: Type '{ src: {}; }' is not assignable to type 'HTMLProps'.错误。

最近，我改用了@types/requirejs，我希望它能集中精力避免包含不适当的其他类型。目前正在运作：

1
npm install @types/requirejs --save-dev

另外，我们可以保留导入并提供一个d.ts文件，其中包含声明适当模块的类型信息。我无法确切发现此文件的外观。