我正在构建一个 react-django 应用程序，为此我创建了一个 css 文件夹以将外部 css 添加到我的组件和一个图像文件夹，其中包含组件中所需的所有图像，但是当我运行应用程序时，我在我的显示未找到模块的终端：
ERROR in ./src/components/HomePage.js 5:0-39
Module not found: Error: Can't resolve './images/insta.png' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components'
resolve './images/insta.png' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components'
using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/images/insta.png)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png.wasm doesn't exist
as directory
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\images\insta.png doesn't exist
@ ./src/components/App.js 3:0-34 10:90-98
@ ./src/index.js 1:0-35
ERROR in ./src/components/css/Homepage.css (./node_modules/css-loader/dist/cjs.js!./src/components/css/Homepage.css) 5:36-149
Module not found: Error: Can't resolve '"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg"' in 'C:\Users\Kuldeep
P\Desktop\RAMAN\GymWebsite\frontend\src\components\css'
resolve '"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg"' in 'C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css'
Parsed request is a module
using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/css)
using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./src/components/css/"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg")
no extension
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
as directory
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
resolve as module
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\css\node_modules doesn't exist or is not a directory
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\node_modules doesn't exist or is not a directory
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules
single file module
using description file: C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\package.json (relative path: ./node_modules/"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg")
no extension
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\node_modules\"C:UsersKuldeep PÞsktopRAMANGymWebsite☼rontendsrc♀omponentspublicSergi2.jpeg" doesn't exist
C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\node_modules doesn't exist or is not a directory
C:\Users\Kuldeep P\Desktop\RAMAN\node_modules doesn't exist or is not a directory
C:\Users\Kuldeep P\Desktop\node_modules doesn't exist or is not a directory
C:\Users\Kuldeep P\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
@ ./src/components/css/Homepage.css 8:6-108 22:17-24 26:0-78 26:0-78 27:22-29 27:33-47 27:50-64
@ ./src/components/HomePage.js 4:0-28
@ ./src/components/App.js 3:0-34 10:90-98
@ ./src/index.js 1:0-35
webpack 5.68.0 compiled with 2 errors and 1 warning in 9118 ms
我已经下载了一些加载器，如 image-webpack-loader、file-loader 和 url-loader 来渲染这些文件，但我没有在我的 webpack.config.js 文件中配置这些加载器，因为我不知道配置它的适当方式这是我的 webpack.confog.js 文件：
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
//additional configuration to handle *.ccs files
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("production"),
},
}),
],
};
这是我收到错误的 homepage.css 文件：
#Homepgbtn1{
position: absolute;
align-items: center;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
}
#Homepgbtn2{
position: absolute;
align-items: center;
left: 48.5%;
right: 50%;
top: 57%;
bottom: 50%;
white-space: nowrap;
}
body{
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: dimgrey;
background-image:url('"C:\Users\Kuldeep P\Desktop\RAMAN\GymWebsite\frontend\src\components\public\Sergi2.jpeg"');
}