我正在使用 create-react-app。我正在尝试从我的 src/components 中的文件调用我的公共(public)文件夹中的图像.我收到此错误消息。
./src/components/website_index.js Module not found: You attempted to import ../../public/images/logo/WC-BlackonWhite.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
import logo from '../../public/images/logo_2016.png';
<img className="Header-logo" src={logo} alt="Logo" />
我读过很多东西说你可以导入路径，但这对我来说仍然不起作用。任何帮助将不胜感激。我知道有很多这样的问题，但他们都告诉我要导入 Logo 或图像，所以很明显我在大局中遗漏了一些东西。
最佳答案
这是create-react-app的开发者添加的特殊限制。它在 ModuleScopePlugin 中实现，以确保文件驻留在 src/ 中。该插件确保从应用程序源目录的相对导入不会超出它。
除了使用 eject 和修改 webpack 配置外，没有正式的方法来禁用此功能。
但是，大多数功能及其更新都隐藏在 create-react-app 系统的内部。如果你使 eject 你将没有更多的新功能和它的更新。因此，如果您还没有准备好管理和配置应用程序，包括配置 webpack 等 - 不要执行 eject 操作。
按照现有规则进行游戏 - 将 Assets 移动到 src 或使用基于 public 文件夹 url 而无需导入。
然而，除了 eject 之外，还有很多非官方的解决方案，基于
<强> rewire 允许您以编程方式修改 webpack 配置而无需 eject。但是删除 ModuleScopePlugin 插件并不好 - 这会失去一些保护并且不会添加 src< 中可用的一些功能。 ModuleScopePlugin 旨在支持多个文件夹。
更好的方法是添加与 src 类似的完全可用的额外目录，该目录也受 ModuleScopePlugin 保护。这可以使用 react-app-alias 来完成
无论如何不要从 public 文件夹导入 - 这将在 build 文件夹中复制，并且可以通过两个不同的 url(以及不同的加载方式)使用，这最终会增加包下载的大小。
从 src 文件夹中导入是可取的，并且具有优势。所有内容都将由 webpack 打包成具有 block 最佳大小 和最佳加载效率 的包。
关于javascript - create-react-app 在 src 目录之外导入限制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44114436/