Webpack 5中在HTML内使用图片出现404未找到错误的问题求助

各位大佬好，我最近在用Webpack 5做项目打包时遇到了图片加载的问题，折腾半天没搞定，想请大家帮忙分析下。

我在HTML里是这么引入图片的：

<img src="./img/author.jpg" alt="The photo of the author" />

Webpack配置中处理图片资源的部分如下：

{
  test: /\.(png|jpg|gif|svg)$/,
  type: "asset/resource",
  generator: {
    filename: "./img/[name][ext]", 
  },
},

我的项目结构里，图片是直接存在src目录下的img文件夹里的，打包时Webpack确实把图片正确复制到了输出目录的img文件夹中，但页面加载时图片就是显示不出来，浏览器控制台报了这个错误：

GET http://localhost:8081/img/author.jpg 404 (Not Found)

我试过修改HTML里的图片路径，比如改成../img/author.jpg或者/img/author.jpg，但都没用，还是报404。有没有大佬能指点下问题出在哪呀？

备注：内容来源于stack exchange，提问作者user26935357