javascript - Webpack 图像 - 404 未找到

Question

我正在从带有 webpack 配置的白纸开始一个新项目。

我正在尝试在我的 html 中导入图像，但我的控制台中有此错误： 控制台错误

在这里你可以展示我的 webpack 配置的一部分：

module.exports = {
  entry: {
    app: 'src/assets/js/index.js',
    style: 'src/assets/scss/styles.scss',
  },
  output: {
    filename: "src/assets/js/index.[hash:8].js",
    path: path.join(__dirname, 'build')
  },
  devServer: {
      contentBase: "./build"
  },
  resolve: {
    modules: [path.resolve(__dirname), 'node_modules', '../../../../plugins/'],
    extensions: ['.js'],
    alias: {
      jquery: path.join(__dirname, '/node_modules/jquery/dist/jquery.min.js'),
      'slick-carousel': path.join(__dirname, '/node_modules/slick-carousel/slick/slick.js')
    }
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: path.resolve(__dirname + '/postcss.config.js')
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: './img/',
              outputPath: 'img'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: './fonts/',
              outputPath: 'fonts'
            }
          }
        ]
      }
    ]
  },
 

我的文件夹结构： 文件夹

导入图像的代码：

<section class="header">
  <h1><img src='../img/logo-texte.png' alt="Le Grand Dressing"/></h1>
</section> 

有人有想法吗？：（ 谢谢你

标签： javascripthtmlimagewebpack