webpack5中，如何处理html中img标签的路径问题？

Question

webpack.config.js

  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          'html-loader',
          'pug-html-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|ico|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.stylus$/i,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
    ]
  },

pug中的图片路径

h1 我是测试
.test 测试图片
img(src="./src/assets/images/index/test1.png")

目前webpack.config.js中对于图片的处理，stylus中的图片已经可以了，但是对于pug中，如果引用图片，就会报错，不知道怎么处理？

报错信息如下：

 Module not found: Error: Can't resolve './src/assets/images/index/test1.png' i  n '/Users/test/webpack-demo/src/html/pages'

下面是package.json中的webpack版本信息

"webpack": "^5.55.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"

Answer 1

<img src={require("xxx.jpg")}></img>