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配置中正确设置了loader，您通常会通过以下方式导入和使用图像：

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

然后：

<img src={image} />

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