Reactjs 如何通过网页5从path导入img？

我知道这听起来很可笑，但是是的，我不知道如何使用Webpack5导入img。我想做的就是导入一个位于项目文件夹中的img，然后将其导入我的react功能组件中，然后在

组件上绘制它

我当前的

webpack.config.js

如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const outputDirectory = 'dist';

module.exports = {
    entry: ['babel-polyfill', './src/client/index.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env",
                        ["@babel/preset-react", {"runtime": "automatic"}]
                    ]
                }
            }
        }, {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }, {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [{
                loader: "url-loader",
                options: {
                    limit: 100000
                }
            }, {
                loader: "css-loader",
                options: {
                    sourceMap: true
                }
            }]
        }]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        open: true,
        historyApiFallback: true,
        hot: true,
        host: '0.0.0.0',
        headers: {"Access-Control-Allow-Origin": "*"},
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
};

我收到的错误消息是：

ERROR in ./public/floors.png 1:0
[1] Module parse failed: Unexpected character '�' (1:0)
[1] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[1] (Source code omitted for this binary file)
[1]  @ ./src/client/app/pages/WorkspaceGenerator.js 19:0-48 98:15-18
[1]  @ ./src/client/app/App.js 19:0-60 66:42-60
[1]  @ ./src/client/index.js 2:0-28 4:35-38
[1] 
[1] webpack 5.38.1 compiled with 1 error in 589 ms
[1] ℹ ｢wdm｣: Failed to compile.

我正在处理的项目的层次结构：

但是你知道吗？我真的不知道从哪里开始寻找资源来做这件事，他们的网站上有太多的东西是用非人类可读的方式写的！请帮忙

问题 您已经将

css加载器

作为

png | woff | woff2 | eot | ttf | svg

资源的

use

规则包含在内，但是

css加载器

不处理图像资源。请将其作为特定

测试的规则删除，并且只能使用
url加载程序
或
文件加载程序

解决方案
const path=require（“路径”）；
const HtmlWebpackPlugin=require（“html网页包插件”）；
const{CleanWebpackPlugin}=require（“CleanWebpackPlugin”）；
const MiniCssExtractPlugin=require（“迷你css提取插件”）；
const outputDirectory=“dist”；
module.exports={
条目：[“babel polyfill”，“/src/client/index.js”]，
输出：{
path:path.join（uuu dirname，outputDirectory），
文件名：“bundle.js”，
},
模块：{
规则：[
{
测试：/\（js|jsx）$/，
排除：/node_模块/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设：[
“@babel/preset env”，
[“@babel/preset react”{runtime:“automatic”}]，
],
},
},
},
{
测试：/\.css$/i，
用法：[MiniCssExtractPlugin.loader，“css loader”]，
},
{
测试：/\（png | woff | woff2 | eot | ttf | svg）$/，
使用：[
{
加载器：“url加载器”、/“文件加载器”
选项：{
限额：100000，
},
},
],
},
],
},
决心：{
扩展名：[“*”、“.js”、“.jsx”]，
},
开发服务器：{
港口：3000，
开放：是的，
历史上的倒退：是的，
热：是的，
主持人：“0.0.0.0”，
标题：{“访问控制允许源”：“*”}，
代理：{
“/api”：”http://localhost:8080",
},
disableHostCheck:true，
},
插件：[
新的CleanWebPackagePlugin（），
新HtmlWebpackPlugin({
模板：“./public/index.html”，
}),
新的MinicsSextract插件({
文件名：“./css/[name].css”，
}),
],
};

结果
文件加载器可以工作，谢谢。您正在使用webpack 5，所以请使用新属性