javascript - 未找到模块:您尝试导入项目 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
文件夹中。阅读这个另一个问题,它提到了同样的问题。
推荐阅读
- c# - 请求完成时通知 observable 完成
- blind - 如何在 Fiverr 中关闭盲模式?
- android - UI 未更新自定义对象列表的 MutableLiveData / ObservableField 属性随数据绑定而更改
- mlr3 - mlr3 中随机森林学习器的参数化
- c# - 用c#上传新图片时如何删除旧图片
- php - PHP Parse 错误:语法错误,意外的“新”(T_NEW),总是因为“=&”
- wordpress - Wordpress HTTPS 模式奇怪的行为
- html - 为 html 编辑器应用条件 css 样式表
- javascript - 如何使用 Webdatarocks 获取列的总计并在图表中使用它
- php - php 复制的文件上传问题($_FILES 不起作用