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

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

你应该在这里使用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> 

我们知道React是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML。

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

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

”。/图片/ logofooter.png”

如果你想把你的javascript文件从公共文件夹添加到react，把特定的文件放在公共文件夹的index.html文件中。你的问题会解决的。

一个简单的解决方案是使用这样的路径:/images/logoFooter.png。如果文件直接位于公用文件夹下，执行/someImage.png。你可以深入/x/y/z/image.png。将图像的定位部分视为该图像的绝对位置。

欲了解更多信息，请访问https://create-react-app.dev/docs/using-the-public-folder/。

试试这个简单易行的方法

不要在src中创建Image文件夹。 在公共场所制作一个图像文件夹。 你工作在反应引导安装

NPM安装反应引导 import React from 导入“引导/ dist / css / bootstrap.min.css”; import {Image} from 'react-bootstrap'; 导出默认函数Main() { 回报( <> <Image src="/img/ Image .jpg/100px250" alt="bg Image " fluid /> . </> ） ｝

希望它已经完成了