Webpack 4配置报错：如何通过src属性加载HTML中的图片？

我看了你的配置和错误提示，问题主要出在以下几个地方，咱们一步步来解决：

1. 图片路径里的多余空格是关键错误 #

你的错误信息里显示：

Module not found: Error: Can't resolve ' ./src/assets/images/portret.jpg' in '/home/viktoras/www/sites/painter-new/src'

注意路径开头的' ./src'有个多余的空格！这说明你HTML里的img标签src属性大概率写错了，比如写成了：

<img src=" ./src/assets/images/portret.jpg" alt="Portret">

把开头的空格去掉，改成：

<img src="./src/assets/images/portret.jpg" alt="Portret">

这是最可能触发当前错误的原因。

2. 确认配置细节是否匹配 #

如果去掉空格后还是有问题，咱们再核对下Webpack配置的几个关键点：

检查html-loader的属性配置 #

你的html-loader配置attrs: ["img:src", ":data-src"]是正确的，已经明确指定要处理img标签的src属性。如果是版本兼容问题，确保html-loader版本和你当前Webpack版本匹配（Webpack 4+搭配html-loader v1+即可正常工作）。

检查file-loader的输出逻辑 #

你的file-loader配置里outputPath: "assets"会把图片打包到build/assets目录下，这个设置没问题。同时你的devServer已经把contentBase指向了build目录，开发环境下的路径映射是正常的。

确认目录结构对应 #

确保你的项目目录结构和路径匹配：

painter-new/
├── src/
│   ├── index.html
│   ├── index.js
│   └── assets/
│       └── images/
│           └── portret.jpg
├── webpack.config.js
└── build/

如果图片实际存放的位置和你写的src路径不对应，也会导致文件找不到。

3. 可选：升级到Webpack 5内置的资源模块（推荐） #

如果你用的是Webpack 5及以上版本，官方已经不推荐使用file-loader了，建议改用内置的asset modules简化配置。把当前的图片处理规则替换成：

{
  test: /\.(png|svg|jpe?g|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: 'assets/[name].[ext]'
  }
}

这个配置和你原本的file-loader效果一致，还能省去额外安装file-loader的步骤。

按照上面的步骤调整后，应该就能解决HTML中img标签加载图片的问题了。

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