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 config的图像(取决于其大小)应包括在你的包文件为Base64字符串,它只是与自己相对路径都包括在内.