我正在使用CreateReact应用程序。我正在尝试从我的src/components中的文件调用公用文件夹中的图像。我收到了这个错误消息
./src/components/website_index.js模块未找到:您试图
导入.././public/images/logo/WC-BlackonWhite.jpg
在项目src/目录之外。境外相对进口
不支持src/src。您可以将其移动到src/内部,也可以添加
从项目的节点_modules/到它的符号链接
从“../../public/images/logo_2016.png”导入徽标;
<;img className=“Header logo”src={logo}alt=“logo”/>
我读过很多东西,说你可以导入路径,但这对我来说仍然不起作用。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我要导入徽标或图像,所以很明显,我在大局中遗漏了一些东西
这是CreateReact应用程序开发人员添加的特殊限制。它在ModuleScopePlugin中实现,以确保文件位于src/中。该插件确保从应用程序源目录的相对导入不会到达其外部
除了使用eject和修改webpack配置外,没有官方方法禁用此功能
但是,大多数功能及其更新都隐藏在CreateReact应用程序系统的内部。如果您将弹出,您将没有更多的新功能及其更新。所以,如果您还没有准备好管理和配置包含的应用程序以配置网页包等,请不要执行弹出操作
按现有规则操作-将资产移动到src或基于public文件夹url使用,无需导入
但是,有许多非官方的解决方案,基于
重新布线,允许您通过编程方式修改网页配置,而无需弹出。但是删除ModuleScopePlugin插件不好-这会失去一些保护,并且不会添加src中可用的一些功能ModuleScopePlugin设计用于支持多个文件夹
更好的方法是添加完全工作的附加目录,类似于src,也受ModuleScopePlugin保护。这可以使用react app rewire alias来完成
无论如何,不要从public文件夹导入-该文件夹将在build文件夹中复制,并通过两个不同的url(以及不同的加载方式)提供,这最终会使软件包下载量变大
从src文件夹导入更可取,并且具有优势。所有内容都将通过webpack打包到捆绑包中,其中包含块最佳大小,以实现最佳加载效率