如果您只需要导入单个文件，如README。Md或package。json，那么它可以显式地添加到ModuleScopePlugin()

配置/ paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

Config /webpack.config.dev.js + Config /webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

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

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

Flaom

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

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

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

react-app-rewired包可以用来删除插件。这样你就不用弹射了。

按照npm包页面上的步骤(安装包并翻转包中的调用)。Json文件)，并使用类似于这个的config-override .js文件:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

这将从使用的WebPack插件中删除ModuleScopePlugin，但保留其余部分，并消除了弹出的必要性。

你需要移动WC-BlackonWhite.jpg到你的src目录。public目录是用于直接链接到HTML中的静态文件(如favicon)，而不是用于直接导入到bundle中的内容。

在我的项目中遇到了同样的问题，并在官方的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'} />; ｝

为别人的答案提供更多的信息。关于如何将.png文件交付给用户，您有两个选项。文件结构应该与您选择的方法一致。这两个选项是:

使用react-create-app提供的模块系统(import x from y)，并将其捆绑到你的JS中。将图像放在src文件夹中。 从公用文件夹提供该文件，并让Node提供该文件。Create-react-app显然还附带了一个环境变量，例如<img src={process.env。PUBLIC_URL + '/img/logo.png'} />;。这意味着你可以在你的React应用中引用它，但仍然可以通过Node提供服务，你的浏览器会在一个正常的GET请求中单独请求它。

来源:create-react-app