img目录的结构react.js

Question

我到底如何才能显示图像？ 40分钟的研究，仍然没有快乐。我认为真正的答案是我在哪里放图像。

主dir的结构

App.js
public > index.js 
Views >
      index.jsx
      layouts >
          footer.jsx
          header.jsx
          master.jsx

无论我把他们赢得的图像放在哪里都不显示。被调用的主文件并在views文件夹中呈现html是index.jsx。

我使用express创建虚拟服务器并作为核心引擎。

我在header.jsx文件中尝试了以下内容

<img src='images/main_home_icon.png'/>
<img src={require('images/main_home_icon.png')} />

Answer 1

这取决于。如果使用<img src='images/main_home_icon.png'/>表单，则基本路径是公共目录。通常，您使用browserify或webpack创建bundle.js，并将javascript文件放在带有索引文件的目录中。然后，您必须将图像放在同一目录中。

另一方面，您可以将图片直接包含在您的javascript代码中：

<img src={require('images/main_home_icon.png')} />

然后您的基本路径是jsx文件的基本路径（在您的情况下：layouts文件夹）。我建议使用这种方法因为你可以定义例如在你的webpack配置中哪些图像（取决于它们的大小）应该作为base64字符串包含在你的bundle文件中，并且只包含它们的相对路径。

如需进一步阅读，我建议您查看这本＆＃34;食谱＆＃34;：https://github.com/christianalfoni/react-webpack-cookbook