使用React，Typescript和Webpack显示静态图像 [英] Displaying a static image using React, Typescript and Webpack

问题描述

我正在尝试使用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版本错误的文章和问题，以下是我的版本:

• 反应15.5.4
• Webpack 2.6.1
• Webpack-dev-server 2.4.5
• TypeScript 2.3.2

---

更新1: 2017.06.05
因此，请查看此SO问题和这篇文章在Medium 上，我已经能够确定问题不在于我使用webpack的方式，而在于我正在使用TypeScript.该错误是由于打字稿编译器不知道什么是.jpg文件这一事实引起的打字稿错误.

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

快到了...

解决方案

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

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

...

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

希望这会有所帮助. import ing也不适合我.

I'm attempting to display an image in a React component as part of a project using webpack and webpack-dev-server.

So far I have completed the following steps:

• Used npm to install file-loader
• Updated webpack.config.js to add a loader for image files
• Imported the image I want into my component
• Used the import in my img tag

Having taken these steps, webpack fails to compile with a 'cannot find module' error:

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

My folder structure is as follows:

/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 

The new loader that I added to my webpack.config.js is:

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

I've imported the image file, in App.tsx, like this:

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

...and used the import in an img tag like this:

<img src={ kittenHeader } />

Note: Full text of webpack.config.js and App.tsx were provided until I got a little bit closer to the answer and realized they weren't relevant (see update 1).

I assume I'm making some very trivial error with regards to the relative path in the import. As you can imagine, I've tried various alternatives.

Can anyone provide some insight?

For reference, as I'm continuously hitting articles and questions relating to the wrong version of webpack, here are my versions:

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

---

Update 1: 2017.06.05
So, looking at this SO question and this post on Medium, I've been able to identify that the problem lies not with how I've used webpack, but with that fact that I'm using TypeScript. The error is a typescript error caused by the fact that the typescript compiler doesn't know what a .jpg file is.

Apparently, I'm going to need to provide a d.ts file or use a require statement.

Almost there...

解决方案

With regular require, this is how I use it in a tsx file:

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

...

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

Hope this helps. importing did not work for me, either.

这篇关于使用React，Typescript和Webpack显示静态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！