通过 webpack 5 使用 HTML 中的图像

Question

我正在尝试在 HTML 标签中使用 img:

<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 将我的图像正确复制到目录，但是当我尝试显示它时，它不会显示并且出现 GET 错误

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

我试图更改图像上的位置，但没有帮助

Answer 1

问题可能是构建后，您的图像是从

dist

文件夹而不是根文件夹提供的。按如下方式更新您的 webpack：-

module.exports = {
  // ... other webpack config
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: "asset/resource",
        generator: {
          filename: "img/[name][ext]",
        },
      },
    ],
  },
  output: {
    publicPath: '/',   
},
};