Webpack 网页包5如何在HTML文件中显示图像

我将

webpack

用于一个小应用程序，目前为止它运行得很好，只是我在显示图像时遇到了问题——我得到了一个404

我在这里查看了我的网页配置：

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

module.exports = {
   entry: {
     index: './src/index.js'
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js'
   },
   module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
            MiniCssExtractPlugin.loader,
              { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true } },
              { loader: 'postcss-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true } },
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'src/assets/images'
                }
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS content and minimize
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                { loader: 'postcss-loader' }
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
        filename: 'index.html'
      }),
      new MiniCssExtractPlugin({
        filename: 'src/css/[name].min.css'
     }),
  ],
  devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, 'dist'),
    open: true
  }
};

然后在我的index.html中，我尝试执行以下操作：

<img class="object-cover z-0 w-full h-full" src='/src/assets/images/top_image.png'>

但就像我之前提到的，我得到了404

---

有人能帮我吗？

您需要更改旧资产加载程序。。。对于图像，建议使用

asset/resource

使用

资产/资源

代替

文件加载器

。 比如：

编辑您的规则：

{
   test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
   type: 'asset/resource'
}

并添加到您的

网页中。输出此：

output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 assetModuleFilename: 'src/assets/images/[name].[ext]'
}

您可以查看有关的更多详细信息