webpack无法解析img标签的@别名图片src路径，运行后图片不显示

1. 核心问题：JSX 中直接写字符串路径不会触发 webpack 别名解析 #

你在 <img> 标签里直接把 @/assets/xxx.png 写在 src 的字符串里，webpack 的别名配置仅对JS 导入语句、CSS url()引用生效，不会处理普通字符串内容，所以 @ 符号不会被替换成 src 的绝对路径，浏览器自然找不到资源。

修复方法：把图片当成模块导入再使用 #

修改 App.jsx 的代码：

// 顶部先导入图片
import logoHeader from '@/assets/images/components/header/logo-header.png'

// 组件内使用
return (
  <img src={logoHeader} alt="logo" class="header__icon"/>
)

2. 检查 file-loader 配置兼容性 #

如果你用的是 webpack5+ 版本，默认已经内置了 Asset Modules 处理静态资源，不需要额外安装 file-loader，两者同时开启会导致路径解析冲突。

推荐 webpack5 配置（替换掉你之前的 file-loader 规则）： #

修改 webpack.base.js 的 module.rules：

module: {
  rules: [
    // 其他 jsx、css 等规则
    {
      test: /\.(png|jpe?g|gif)$/i,
      // 类型设为 asset/resource，相当于 file-loader 的效果
      type: 'asset/resource',
      generator: {
        // 配置图片输出路径和文件名
        filename: 'images/[name].[hash:8][ext]'
      }
    }
  ]
}

如果坚持用 file-loader，需要关闭 webpack 内置的静态资源处理，在规则里加 type: 'javascript/auto'：

{
  test: /\.(png|jpe?g|gif)$/i,
  type: 'javascript/auto',
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: 'images/'
      }
    }
  ]
}

3. 修正 webpack.dev.js 的错误配置 #

你当前 webpack.dev.js 里的 output.path 配置为 '/' 是无效的，devServer 的 static 配置也需要指定静态资源根目录：
修改 webpack.dev.js：

module.exports = merge(base, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    // 开发环境配置公共路径为根路径
    publicPath: '/'
  },
  devServer: {
    port: 3000,
    // 指定静态资源目录为 public 文件夹
    static: './public'
  }
});

4. 排查验证步骤 #

• 修改完成后先删除 node_modules/.cache 目录，清除 webpack 缓存
• 重新运行 npm start
• 打开浏览器控制台查看 img 标签的 src 是否已经被替换成 /images/logo-header.xxxxxx.png 格式的路径
• 如果路径已经生成但 404，检查 network 面板里请求的图片地址是否和 devServer 的地址匹配

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