create-react-app在src目录之外导入限制 [英] The create-react-app imports restriction outside of src directory

问题描述

我正在使用create-react-app。我试图从我的 src / components 中的文件中调用我公共文件夹中的图像。我收到此错误消息。

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message.

./ src / components / website_index.js找不到模块：您试图
导入../../public/images/logo/WC-BlackonWhite.jpg在项目src /目录之外落入
。不支持
src /之外的相对导入。您可以在src /中移动它，或者从项目的node_modules /中添加
符号链接。

从'../../public/images/logo_2016.png'导入徽标;
< img className =Header-logosrc = {logo} alt =Logo/>

I已经阅读了很多东西，说你可以对路径进行导入，但这对我来说仍然不起作用。任何帮助将不胜感激。我知道有很多这样的问题，但他们都告诉我要导入徽标或图像，所以我在大图中遗漏了一些东西。

I have read many things saying you can do an import to the path but that is still not working for me. Any help would be greatly appreciated. I know there are many questions like this but they are all telling me to import logo or image so clearly I am missing something in the big picture.

推荐答案

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

This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.

您可以禁用此功能，但仅限于 eject create-react-app项目的操作。

You can disable this feature but only after eject operation of create-react-app project.

大多数功能及其更新都隐藏在create-react-app系统的内部。如果您使弹出，您将不再拥有某些功能及其更新。因此，如果您还没有准备好管理和配置包含的应用程序来配置webpack等等 - 请不要执行 eject 操作。

Most features and its updates are hidden into the internals of create-react-app system. If you make eject you will no more have some features and its update. So if you are not ready to manage and configure application included to configure webpack and so on - do not do eject operation.

按现有规则播放（转到src）。但现在您可以知道如何删除限制：执行弹出并从webpack配置文件中删除 ModuleScopePlugin 。

Play by the existing rules (move to src). But now you can know how to remove restriction: do eject and remove ModuleScopePlugin from webpack configuration file.

这篇关于create-react-app在src目录之外导入限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！