[英]Module not found: You attempted to import which falls outside of the project src/ directory. Relative imports outside of src/ are not supported
I have just started React JS, but I have a problem and despite my research I can not get results, I have tried many ways, but I have not been able to solve this problem.Can you help?我刚刚开始 React JS,但是我有一个问题,尽管我的研究我无法得到结果,我尝试了很多方法,但我一直无法解决这个问题。你能帮忙吗?
this is the error I got at the terminal这是我在终端遇到的错误
./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.
My File Structure我的文件结构
- node_modules
- public
* images
* img-2.jpg
* videos
- src
* App.js
* App.css
* index.js
* setupTest.js
the picture i am trying to import in my css file我试图在我的 css 文件中导入的图片
background-image: url('/public/images/img-2.jpg');
App.js应用程序.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 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"
]
}
}
You should use /images/img-2.jpg/
to refer to the folder.您应该使用
/images/img-2.jpg/
来引用该文件夹。 The reason is that you are using create-react-app
to create this React app.原因是您正在使用
create-react-app
来创建这个 React 应用程序。 When being bundled the app will be located in the public
folder.捆绑后,应用程序将位于
public
文件夹中。 Read this other question where it mentions the same issue.阅读这个另一个问题,它提到了同样的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.