我正在尝试在我的webpack项目中加载图像。但是当我启动我的开发服务器时找不到它们，出现以下错误：Failed to load resource: the server responded with a status of 404 (Not Found)。

我也想将它们包含在名为dist的文件夹中的img文件夹中，但是我不知道怎么做才能破坏所有内容。

我尝试了在网络上找到的其他方法，但是没有一个起作用。

我的文件夹结构：

- config (all my webpack config files)
- src
  |- fonts
  |- img
  |- javascript
  |- scss
  |- index.html

这是我的webpack.base.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');

var DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  // https://webpack.js.org/concepts/entry-points/#multi-page-application
  entry: {
    index: './src/javascript/index.js',home: './src/javascript/chunks/home.js',about: './src/javascript/chunks/about.js',projects: './src/javascript/chunks/projects.js'
  },output: {
    path: path.resolve(__dirname,'../dist'),filename: 'index.[contenthash:8].js',chunkFilename: '[id]-[chunkhash].js',publicPath: '/'
  },devserver: {
    open: true
  },// https://webpack.js.org/concepts/loaders/
  module: {
    rules: [
      {
        test: [/.js$|.ts$/],exclude: /(node_modules)/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/typescript','@babel/preset-env']
          }
        }
      },{
        test: /\.svg$/,loader: 'svg-url-loader',options: {
          noquotes: true
        }
      },{
        test: /\.(gif|png|jpe?g|svg)$/i,exclude: /fonts/,use: [
          'file-loader',{
            loader: 'image-webpack-loader',options: {
              bypassOnDebug: true,// webpack@1.x
              disable: true // webpack@2.x and newer
            }
          }
        ]
      },{
        test: [/.css$|.scss$/],include: [path.resolve(__dirname,'../src/scss/')],use: [
          { loader: MiniCssExtractPlugin.loader },{ loader: 'css-loader' },{ loader: 'sass-loader' },{ loader: 'postcss-loader' }
        ]
      },{
        test: /\.(woff|woff2|ttf|otf|eot)$/,use: [
          {
            loader: 'file-loader',options: {
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },resolve: {
    alias: {
      '@scss': path.resolve(__dirname,'../src/scss'),'@img': path.resolve(__dirname,'../src/img'),'@fonts': path.resolve(__dirname,'../src/fonts'),'@': path.resolve(__dirname,'../src')
    },modules: ['node_modules',path.resolve(__dirname,'../src')],extensions: ['.js','.jsx','.scss','.gif','.png','.jpg','.jpeg','.svg']
  },// https://webpack.js.org/concepts/plugins/
  plugins: [
    new WebpackAssetsManifest({
      // Options go here
    }),new DashboardPlugin({
      // Options go here
    }),new MiniCssExtractPlugin({
      filename: 'app.[contenthash:8].css',chunkFilename: '[id].css'
    }),new HtmlWebpackPlugin({
      template: './src/index.html',inject: true,chunks: ['index','home'],minify: {
        removeComments: true,collapseWhitespace: true
      },filename: 'index.html'
    }),new HtmlWebpackPlugin({
      template: './src/about.html','about'],filename: 'about.html'
    }),new HtmlWebpackPlugin({
      template: './src/projects.html','projects'],filename: 'projects.html'
    })
  ]
};

在我的html中，我将图像称为：<img src="./img/myImage.jpg" >

在我的scss文件中，我将这样的图像称为：url(../img/arrow__top-right__outline__yellow.svg);（我使用../img/是因为当我的文件位于我的scss文件夹中时，我向上移了1个文件夹来获取我的图像src/img/文件夹..对吗？）