javascript - img 目录结构 react.js

Question

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

主目录结构

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

无论我把图片放在哪里，它们都不会显示。被调用并呈现 html 的主要文件是 views 文件夹中的 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'/>形式，那么你的基本路径就是公共(public)目录。通常你用 browserify 或 webpack 创建一个 bundle.js 并将 javascript 文件放在一个带有索引文件的目录中。然后，您必须将图像放在同一目录中。

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

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

那么您的基本路径就是 jsx 文件的基本路径(在您的例子中:layouts 文件夹)。我建议使用此方法，因为您可以定义例如在你的 webpack 配置中，哪些图像(取决于它们的大小)应该作为 base64 字符串包含在你的 bundle 文件中，哪些只包含在它们的相对路径中。

为了进一步阅读，我建议您看一下这本“食谱”:https://github.com/christianalfoni/react-webpack-cookbook