Webpack打包环境下图片仅显示alt文本问题求助

针对你遇到的图片仅显示alt文本、无法正常加载的问题，给你几个具体的排查和解决步骤：

1. 补全img-loader依赖 #

img-loader只是一个工具封装层，它依赖mozjpeg、pngquant、svgo等具体的图片优化工具，缺失这些依赖会导致图片处理失败，无法输出有效文件。执行以下命令安装全部依赖：

npm install img-loader mozjpeg pngquant svgo --save-dev

2. 修正file-loader路径配置 #

当前file-loader仅设置了输出文件名规则，但缺少publicPath配置，可能导致HTML中img的src路径指向错误。修改file-loader的options：

{
  loader: "file-loader",
  options: {
    name: "img/[name].[ext]",
    // 根据打包目录调整：如果HTML文件在dist根目录，图片在dist/img，就用这个相对路径
    publicPath: "./img/"
  },
},

3. 让Webpack处理HTML中的图片路径 #

如果是在HTML文件中直接写<img src="./src/img/xxx.png"这类相对路径，Webpack不会自动解析该路径，需要添加html-loader来处理HTML中的img标签：

• 安装html-loader：

npm install html-loader --save-dev

• 在webpack.config.js的module.rules中新增配置：

{
  test: /\.html$/,
  use: ['html-loader']
}

4. 验证isProduction变量的正确性 #

你的img-loader设置了enabled: isProduction，仅在生产环境启用图片优化。如果isProduction变量定义错误（比如开发环境误设为true），会导致开发环境中img-loader强行运行，依赖缺失或配置问题会中断图片处理。可以在配置文件中添加打印语句确认变量值：

console.log('isProduction:', isProduction); // 运行打包命令时查看控制台输出

5. 查看Webpack打包日志 #

运行npm run dev或npm run build时，仔细观察控制台的报错信息，比如img-loader处理某张图片时的错误提示，这能直接定位问题（比如图片格式不兼容、依赖缺失等）。

6. 检查开发服务器静态资源配置 #

如果使用webpack-dev-server，需确保devServer的static配置（旧版为contentBase）指向打包输出目录，示例：

devServer: {
  static: './dist' // 假设打包输出到dist目录
}

修改配置后重新打包，打开浏览器开发者工具查看img标签的src路径是否正确、是否出现404状态码，逐步排查即可解决问题。

内容的提问来源于stack exchange，提问作者Kamil Staliński