把@Flaom写的评论放在这里，标记为回复答案，这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做，你可以从src文件夹外导入，而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时，我们不能使用公共文件夹中的图像。我自己也有这个问题，读了所有这些答案，我意识到，答案说的是“黑”应用程序，以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说，这是可以的。

就我个人而言，我不希望在我自己的项目中添加改变应用概念的解决方案，特别是在商业项目中。@Flaom解决方案是最简单的，如果将来有任何变化，它可以被另一个解决方案取代。它没有任何风险，可以随时移除，是最简单的。

公共文件夹内的图像

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

使用图像在js扩展

如果你的图片在公共文件夹中，那么你应该使用

"/images/logo_2016.png"

在<img> SRC中，而不是导入

'../../public/images/logo_2016.png'; 

这是可行的

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

下面是一个在简单情况下工作得很好的替代方案(使用fs和ncp)。在开发过程中，保持一个脚本运行，以监视/src之外的共享文件夹的更改。当进行更改时，脚本可以自动将共享文件夹复制到项目中。下面是递归地查看单个目录的示例:

// This should be run from the root of your project

const fs = require('fs')
const ncp = require('ncp').ncp;

ncp.limit = 16

// Watch for file changes to your shared directory outside of /src
fs.watch('../shared', { recursive: true }, (eventType, filename) => {
    console.log(`${eventType}: ${filename}`)

    // Copy the shared folder straight to your project /src
    // You could be smarter here and only copy the changed file
    ncp('../shared', './src/shared', function(err) {
        if (err) {
          return console.error(err);
        }

        console.log('finished syncing!');
    });
})

在我的项目中遇到了同样的问题，并在官方的create-react-app文档中找到了这个:https://create-react-app.dev/docs/using-the-public-folder/

有一个“逃生舱口”可以在模块系统之外添加资产:

如果您将文件放入公用文件夹，则它将不会被处理 webpack。相反，它将原封不动地复制到构建文件夹中。来 在公用文件夹中引用资产时，需要使用环境 变量PUBLIC_URL。

下面是他们提供的一个例子:

呈现(){ //注意:这是一个逃生口，应该谨慎使用! //通常我们建议使用' import '来获取资产url //如上面“添加图像和字体”所述。 返回<img src={process.env。PUBLIC_URL + '/img/logo.png'} />; ｝

在制作《Truffle》时，我不得不克服同样的问题。解决方案如下:

由于Create-React-App的默认行为不允许从src文件夹外导入文件，我们需要将build文件夹中的合同带到src内。我们可以在每次编译合同时复制并粘贴它们，但更好的方法是简单地配置Truffle将文件放在那里。

在“truffle-config.js”文件中，替换如下内容:

const path = require("path");

module.exports = {
  contracts_build_directory: path.join(__dirname, "client/src/contracts")
};

我不知道这是否对你有帮助，但我知道当我在Truffle中遇到同样的问题时，我发现了你的问题，这可能会帮助其他人。