Webpack 5导入图片至模块后浏览器无法加载图片的技术求助

看起来你的问题出在Webpack Manifest插件的publicPath配置与Django静态资源路径不匹配上，导致React渲染的图片路径是相对路径，浏览器无法正确定位到资源。下面是具体的解决方案和分析：

直接修复步骤 #

修改WebpackManifestPlugin的publicPath配置，让它和Webpack输出的publicPath保持一致：

plugins: [
  new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
  new WebpackManifestPlugin({ publicPath: '/' }), // 把这里的'./'改成'/'
],

问题原因分析 #

你当前的WebpackManifestPlugin设置了publicPath: './'，导致生成的manifest.json里图片路径是相对路径（比如./img/fbf8476a272a27c10e80.jpg）：

{
  "front/assets/no-image.jpg": "./img/fbf8476a272a27c10e80.jpg"
}

当React把这个路径赋值给<img src={SomeImage}>时，浏览器会基于当前页面的URL去解析这个相对路径：

• 如果你的页面在根路径/，浏览器会请求/img/xxx.jpg（这时候刚好能命中Django的静态资源）
• 但如果页面在子路径（比如/dashboard/），浏览器会请求/dashboard/img/xxx.jpg，而Django的静态资源实际在根路径下，自然找不到。

而Webpack的output.publicPath已经设置为/（绝对根路径），所以把Manifest插件的publicPath也改成/后，生成的路径会变成绝对路径：

{
  "front/assets/no-image.jpg": "/img/fbf8476a272a27c10e80.jpg"
}

此时React渲染的图片标签会是<img src="/img/fbf8476a272a27c10e80.jpg" />，浏览器会直接请求根路径下的资源，和Django的静态服务路径完全匹配。

额外验证点 #

1. 确认Django的STATICFILES_DIRS已经包含了Webpack的输出目录local-static，这样Django才能找到编译后的静态资源：

# settings.py
STATICFILES_DIRS = [
    BASE_DIR / 'local-static',
]

2. 如果你后续调整了Django的STATIC_URL（比如改成/static/），记得同步修改Webpack的output.publicPath和WebpackManifestPlugin的publicPath为/static/，保持三者一致。

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