webpack项目HTML页面图片加载失败问题求助

问题排查及解决方案 #

核心原因 #

• 你的webpack配置中缺少图片资源的处理规则，也没有配置HTML内资源引用的解析逻辑，webpack不会自动识别打包HTML中直接写的图片路径，也不会把源目录的图片输出到打包目录。
• HTML中使用Windows风格的反斜杠\作为路径分隔符不符合Web规范，且路径填写方式不对，webpack无法正确识别资源位置。

修复步骤 #

1. 安装必要依赖
   执行以下命令安装html-loader，用于解析HTML文件中的资源引用：

npm install html-loader --save-dev

2. 修改webpack.config.js配置
   在module.rules数组中新增两条规则：

module.exports = {
  // 原有配置保持不变
  module: {
    rules: [
      // 原有scss规则保持不变
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]'
        }
      }
    ],
  }
}

3. 修改HTML中的图片路径
   将img标签的src改为相对index.html的路径，使用正斜杠作为分隔符：

<img class="header__logo" src="./assets/image.png" alt="Logo">

验证效果 #

重新启动devServer或者执行打包命令后，检查dist目录是否存在打包输出的图片文件，同时dist目录下的index.html中img标签的src会被自动替换为打包后的正确路径，图片即可正常加载。

你提到其他相同配置的项目可以正常加载图片，大概率是其他项目已经提前配置了上述规则、或者将图片放在静态资源目录直接复制到打包目录、或者是在JS文件中主动引入图片再绑定到src属性，你可以对比确认。

内容的提问来源于stack exchange，提问作者LGAduana