未找到模块：您尝试导入项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入答案

【问题标题】：Module not found: You attempted to import which falls outside of the project src/ directory. Relative imports outside of src/ are not supported未找到模块：您尝试导入项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入
【发布时间】：2021-03-12 22:41:41
【问题描述】：

我刚开始React JS，但是我有一个问题，尽管我研究了我也没有得到结果，我尝试了很多方法，但我都无法解决这个问题。你能帮忙吗？

这是我在终端遇到的错误

./src/App.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)Module not found: You attempted to import ../public/images/img-8.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

节点版本：v12.18.3
Npm 版本：6.14.8

我的文件结构

- node_modules
 - public
     * images
          * img-2.jpg
     * videos

 - src
    * App.js
    * App.css
    * index.js
    * setupTest.js

我尝试在我的 css 文件中导入的图片

background-image: url('/public/images/img-2.jpg');

App.js

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router,Switch, Route } from "react-router-dom";

function App() {

  return (
   <Router>
     <Navbar></Navbar>
     <Switch>
       <Route path="/" exact />
     </Switch>
   </Router>
  );
}

export default App;

package.json

 {
      "name": "react-website",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.11.6",
        "@testing-library/react": "^11.2.2",
        "@testing-library/user-event": "^12.2.2",
        "css-loader": "^5.0.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "style-loader": "^2.0.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您应该使用/images/img-2.jpg/ 来引用该文件夹。原因是您正在使用create-react-app 创建这个 React 应用程序。捆绑后，应用程序将位于 public 文件夹中。阅读此other question，其中提到了相同的问题。

【讨论】：