How to load images through webpack when using HTMLWebpackPlugin?

Question

I am using HTMLWebpackPlugin and in my template I have an img tag:

If you notice, here I am using a r

Answer 1

Using html-loader with HTML webpack plugin worked for me.

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