如何在 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中文網其他相關文章！