这可以直接完成，而无需使用公共文件夹的路径。 你可以这样做

<img src="/images/image-name" alt=""/>

这是因为我们没有在浏览器中使用App.js。由于index.html是在浏览器本身执行的，图像的路径已经在包含index.html文件的公共文件夹中

这是create-react-app开发者添加的特殊限制。它在ModuleScopePlugin中实现，以确保文件驻留在src/中。该插件确保从应用程序的源目录导入的相对文件不会到达应用程序的外部。

除了使用eject和修改webpack配置，没有任何官方方法可以禁用此功能。

但是，大多数功能及其更新都隐藏在创建-反应-应用程序系统的内部。如果你让弹出你将没有更多的新功能和它的更新。因此，如果你还没有准备好管理和配置应用程序，包括配置webpack等-不要做弹出操作。

发挥现有的规则-移动资产到src或使用基于公共文件夹url没有导入。

然而，有许多非官方的解决方案，而不是驱逐 Rewire允许你以编程方式修改webpack配置而不弹出。但是删除ModuleScopePlugin插件并不好——这失去了一些保护，并且没有添加src中可用的一些特性。ModuleScopePlugin被设计为支持多个文件夹。

更好的方法是添加完全工作的附加目录，类似于src，也受ModuleScopePlugin保护。这可以使用react-app-alias来完成

无论如何，不要从公共文件夹导入-这将在构建文件夹中复制，并将通过两个不同的url(和不同的加载方式)可用，这最终会恶化包的下载大小。

从src文件夹导入是更可取的，它有很多优点。所有东西都将通过webpack打包到包中，以块的最佳大小和最佳的加载效率。

如果你想从公共目录访问CSS文件，你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误

或者，您可以在index.html中链接此文件，该文件也位于公共目录中。

<link rel="stylesheet" href="App.css">

公共文件夹内的图像

  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扩展

用Craco去除:

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      return webpackConfig;
    }
  }
};

您可以尝试使用simlinks，但是相反。

React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。

在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:

移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE

这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。