未找到模块:您试图导入项目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');
应用程序.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文件夹中。阅读其他问题,其中提到了相同的问题。
THE END
二维码