ReactJS和公共文件夹中的图像

Question

我是ReactJS中的新手,我想在组件中导入图像.这些图像位于公用文件夹内,我不知道如何从react组件访问该文件夹.

有任何想法吗 ？

编辑

我想在Bottom.js或Header.js中导入图像

结构文件夹是:

我不使用webpack.我是不是该 ？

编辑2

我想使用webpack加载图像和其他资产.所以在我的配置文件夹中我有下一个文件:

我需要在哪里添加图像的路径以及如何添加？

谢谢

Answer 1

你不需要任何webpack配置..

在您的组件中只需提供图像路径.默认情况下,react会在公共目录中知道它.

<img src="/image.jpg">

Answer 2

要公开引用图像，我知道有两种方法可以直接使用。就像上图来自霍马姆·巴赫拉尼（Homam Bahrani）。

使用

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

既然这可以工作，那么您实际上不需要任何其他东西，这也可以工作...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Answer 3

1-如果你使用 webpack 进行配置是很好的，但你可以简单地使用图像路径，react 会发现它位于公共目录中。

<img src="/image.jpg">

2-如果你想使用 webpack，这是 React 中的标准做法。您可以在 webpack.config.dev.js 文件中使用这些规则。

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

然后你可以在react组件中导入图像文件并使用它。

import image from '../../public/images/logofooter.png'

<img src={image}/>

Answer 4

react docs在文档中很好地解释了这一点，您必须使用process.env.PUBLIC_URL放置在公用文件夹中的图像。见这里获取更多信息

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Answer 5

只需使用

<img src='/image.extension' />

React 会自动指向 public 目录

Answer 6

在公共 ex.Assets 中创建一个文件夹，并将图像放入该文件夹中，并在 src 中分配文件夹名称/图像名称

<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />