相关疑难解决方法(0)

我正在尝试使用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'.

Run Code Online (Sandbox Code Playgroud)

我的文件夹结构如下：

/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 

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

<img src={ kittenHeader } />

Run Code Online (Sandbox Code Playgroud)

注意：提供了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语句。

差不多好了...