Question

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

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

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

采取这些步骤后，webpack无法使用“无法找到模块”错误进行编译：

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）。 / p>

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

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

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

React 15.5.4
Webpack 2.6.1
Webpack-dev-server 2.4.5
TypeScript 2.3.2

<小时/> 更新1： 2017.06.05
所以，看看this SO question和this post on Medium，我已经能够确定问题不在于我如何使用webpack，而是因为我正在使用TypeScript。该错误是由于打字稿编译器不知道.jpg文件是什么而导致的打字稿错误。

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

差不多......

Answer 1

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

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

...

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

希望这会有所帮助。 import对我来说也不起作用。

Answer 2

这就是我的工作方式：

// 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>
);

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

Answer 3

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

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

尽管您必须忽略警告。

Answer 4

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

export module "*.jpg";

Answer 5

在任何你想要的 React-Typescript 组件中试试我的代码

import * as logo from './assests/icon.jpg';

const img = logo.default;

const Comp = ()=> {
    return <img src={img} alt="image" className="" />
}

Answer 6

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

webpack配置很好，尽管编译错误，图像文件仍然成功复制到dist文件夹。

我们可以通过两种方式解决问题。

首先，我们可以通过使用＆＃39;要求＆＃39;来绕过TypeScript导入。声明。为此，导入...

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

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

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

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

注意，在我的情况下，我还需要安装一些类型来支持＆＃39;要求＆＃39;声明。没有这些，我收到TS2304: Cannot find name 'require'错误。

最初我使用@types/node，如this SO answer中所述，但@EvanSebastian指出该节点旨在支持编写NodeJS模块，这不是我正在做的事情（请参阅评论）问题）。

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

最近，我已切换到使用@types/requirejs，我希望它足够重视以避免包含大量不适当的其他类型。它目前正在运作：

npm install @types/requirejs --save-dev

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

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

6 个答案: