1-如果你使用webpack进行配置是很好的，但你可以简单地使用image path, 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}/>

简单地使用

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

React会自动指向公共目录

你应该在这里使用webpack来使你的生活更简单。在配置中添加以下规则:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

在这之后，你可以简单地将图像导入你的react组件:

import myImage from 'publicfolder/images/Image1.png'

使用myImage如下所示:

<div><img src={myImage}/></div>

或者如果图像导入到组件的本地状态

<div><img src={this.state.myImage}/></div> 

1-如果你使用webpack进行配置是很好的，但你可以简单地使用image path, 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}/>

react文档很好地解释了这一点，你必须使用process.env。PUBLIC_URL，图像放在公共文件夹中。更多信息请看这里

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

这里有三个简单的方法可以做到这一点。

你可以在目录中创建一个文件夹，然后像我们导入的方式一样访问它 你可以在SRC中直接给出图像名称 <img src="image__name" alt="yourpic" />

//默认情况下，公共文件夹中的react look可以在img标签中渲染图像

Const image = window.location.origin + "/image.png";

//如果你的图片在公共目录的imagecollection文件夹里面，你可以用这种方式导入它

  const image = window.location.origin + "/imagecollection /image.png";
 <img src={image} alt="yourpic" />