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

我刚刚开始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;

包.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"
        ]
      }
    }

你应该使用/images/img-2.jpg/来参考该文件夹。原因是你正在使用create-react-app创建这个 React 应用程序。捆绑后，应用程序将位于public文件夹。读这个其他问题 https://stackoverflow.com/questions/64910839/require-function-not-working-with-image-in-react/64911131#64911131其中提到了同样的问题。