React不加载本地图像

Question

首先，在不使用npx create-react-app的情况下设置了项目，所有Webpack配置都是手动设置的。

React可以显示导入的图像或来自Web的图像。 但是无法加载像<img src="images/img1.jpg" />或<img src={require("./images/img1.jpg")} />这样的图像，两者均无效。

也许真正的问题与路径有关？我越来越 this error in Chrome。 但是路径应该很好。 My project structure

使用npm run start或npm run build时都不会加载图像。 我的NPM脚本：

"scripts": {
        "start": "webpack-dev-server --open --config webpack.config.js",
        "build": "webpack --config webpack.config.js"
      }

我的webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(jpg|png|svg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "imgs"
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({ template: "./src/index.html"})
    ]
}