如何在 Create React App 中导入 `src` 目录之外的资源？

如何在Create-React-App中处理Src目录之外的导入限制

在Create-React-App中，从外部导入文件src 目录受到限制。此限制可确保源文件保留在指定文件夹中，以便更好地组织并防止不必要的导入。

如果您遇到以下错误消息：

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.

这意味着您正在尝试导入来自 src 目录外部的图像。有几种方法可以解决此问题：

1.将资源移至 src 目录

将图像文件移至 src 目录以允许导入。这可确保所有重要文件都驻留在指定的源文件夹中。

2.使用公用文件夹资源的 URL

不要从公用文件夹导入，而是使用绝对或相对 URL 直接从公用文件夹访问图像。这种方法避免了导入限制，并允许您从 src 目录外部访问资源。

重要提示：避免直接从公共文件夹导入至关重要，因为这可能会导致重复构建中的资产并影响应用程序的最佳加载效率。从 src 文件夹导入可确保 webpack 有效地捆绑文件，优化其大小和加载速度。

以上是如何在 Create React App 中导入 `src` 目录之外的资源？的详细内容。更多信息请关注PHP中文网其他相关文章！