我不是一个webpackMaven，但我通过这样做让它工作：

<img src="<%=require('./src/assets/logo.png')%>">

字符串
插件配置

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html'
  }),

型
根据文档：https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
默认情况下（如果您没有以任何方式指定任何加载器），会启动一个回退lodash加载器。
<%= %>表示lodash模板
在引擎盖下，它使用了一个webpack子编译，它继承了主配置中的所有加载器。
在img路径上调用require将调用文件加载器。
您可能会遇到一些路径问题，但它应该可以工作。

使用HTML加载器与HTML webpack插件为我工作。

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

字符串

你应该使用CopyWebpackPlugin。
const CopyWebpackPlugin = require('copy-webpack-plugin');个

plugins:[
    ....
    new CopyWebpackPlugin({'patterns': [
        { from: './src/assets/images', to: 'images' }
    ]}),
    ....
]

字符串
这是将src/assets/images复制到dist/folder/images。

你可以在你的webpack配置中使用url-loader来在你的最终包中添加低于某个限制的图片，这些图片被编码为base64 uri，而超过限制的图片则作为常规图片标签（相对于publicPath）。

module.rules.push({
  test: /\.(png|jp(e*)g|gif)$/,
  exclude: /node_modules/,
  use: [{ 
    loader: 'url-loader',
    options: {
      limit: 10000,
      publicPath: "/"
    }
  }]
})

字符串

我在遵循Webpack提供的入门指南时遇到了这个问题。我使用的是指南中的模板代码和捆绑图像。但是当迁移现有的vanilla html/js/css项目使用Webpack时，我发现，为了像我想要的那样使用模板HTML加载-模板中包含图像资源的路径-我必须从webpack.config.js中删除资产加载器的使用，以便html-loader正确解析它在dist中创建的新散列路径
要使用Webpack文档语法，请删除前缀为“-”的行，并添加前缀为“+”的行

module: {
  rules: [
    {
      - test: /\.(png|svg|jpg|jpeg|gif)$/i,
      - type: 'asset/resource',
      + test: /\.(html)$/,
      + use: ['html-loader'],
    }
  ]
}

字符串