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

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

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

谁能提供一些见解？

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

• 反应 15.5.4
• Webpack 2.6.1
• Webpack 开发服务器 2.4.5
• 打字稿 2.3.2

---

更新一： 2017.06.05

所以，看看 这个 SO question 和 Medium 上的这篇文章，我已经能够确定问题不在于我如何使用 webpack，而在于我使用的是 TypeScript。该错误是由于打字稿编译器不知道 .jpg 文件是什么而导致的打字稿错误。

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

差不多好了…

原文由 Montgomery ‘monty’ Jones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

...

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

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

原文由 mcku 发布，翻译遵循 CC BY-SA 3.0 许可协议