Webpack 和 React.js

Question

我尝试在我的 react.js 应用程序中使用 webpack。我遇到的问题是关于图像的。如果我在我的入口文件中需要正确的图像，图像会被构建到正确的目的地，但我的应用程序找不到它。我只是得到一张空白图片：

main.jsx: require('./styles/images/logo.png');

in my application: <img src="images/logo.png"  width="60%" alt="" />

当我直接在 src-tag 中需要图像时，一切都很好：

<img src={require('../styles/images/logo.png')} alt="" width="80px" />

有谁知道我做错了什么？我希望能够只需要整个图像文件夹，并且每个 img-tag 都将填充正确的图像。任何解决方案的线索将不胜感激:)

Answer 1

鉴于在 webpack 配置中正确设置了加载器，您通常会通过以下方式导入和使用图像：

var image = require('./styles/images/logo.png');

然后：

<img src={image} />

这两个语句显然必须位于同一个文件中。