使用 React、Typescript 和 Webpack 显示静态图像

IT技术 reactjs webpack typescript-typings webpack-file-loader
2021-05-05 14:24:56

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

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

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

采取这些步骤后，webpack 无法编译并出现“找不到module”错误：

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

我的文件夹结构如下：

/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 的新加载器是：

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

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

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

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

<img src={ kittenHeader } />

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

我假设我在导入中的相对路径方面犯了一些非常微不足道的错误。如您所想，我尝试了各种替代方案。

任何人都可以提供一些见解吗？

作为参考，由于我不断地访问与错误版本的 webpack 相关的文章和问题，以下是我的版本：

  • react 15.5.4
  • 网络包 2.6.1
  • Webpack-dev-server 2.4.5
  • typescript 2.3.2

更新 1： 2017.06.05
所以，看看这个 SO 问题和这篇关于 Medium 的帖子，我已经能够确定问题不在于我如何使用 webpack，而在于我使用的是 TypeScript。该错误是由于typescript编译器不知道 .jpg 文件是什么而导致的typescript错误。

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

快好了...

4个回答

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

const logo = require('../assets/logo.png');

...

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

希望这可以帮助。importing 也不适合我。

这就是我让它工作的方式：

// This declaration can be move in some common .d.ts file, will prevent tslint from throwing error
declare function require(path: string);

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

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

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

webpack 配置很好，尽管编译错误，但图像文件已成功复制到 dist 文件夹证明了这一点。

我们有两种方法可以解决这个问题。

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

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

...可以替换为 require ...

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

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

请注意，就我而言，我还需要安装一些类型来支持“require”语句。没有这些，我就会TS2304: Cannot find name 'require'出错。

最初我使用了@types/node，如this SO answer中所述，但@EvanSebastian指出node旨在支持编写NodeJSmodule，这不是我正在做的（请参阅对问题的评论）。

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

最近，我转而使用@types/requirejs，我希望它足够专注，以避免包含大量不适当的附加类型。它目前正在工作：

npm install @types/requirejs --save-dev

或者，我们可以保留导入并提供一个d.ts文件，其中包含声明适当module的类型信息。我一直无法确切地发现这个文件的样子。

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

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

尽管您必须忽略警告。

其它你可能感兴趣的问题
上一篇如何镜像和调整具有固定宽度和高度的图像部分 下一篇react - 更改 this.state onClick 呈现的 array.map()