你也可以用这个…它的工作假设'yourimage.jpg'是在你的公共文件夹。

<img src={'./yourimage.jpg'}/>

你也可以用这个…它的工作假设'yourimage.jpg'是在你的公共文件夹。

<img src={'./yourimage.jpg'}/>

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是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML。

所以你想在哪里使用这些图像并不重要。最佳实践是使用绝对路径(参考public)。不担心相对吗 路径。

在你的例子中，这应该在任何地方都适用:

”。/图片/ logofooter.png”

要在公共场合引用图片，我知道有两种直接的方法。 一个像上面的Homam Bahrani。

使用

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

既然这个方法有效，你真的不需要其他任何东西，但是，这个方法也有效。

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

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

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