Webpack 打包后 HTML 中的图片路径为什么 404 了？

上官浩奇提问于 2026-03-08 18:45:18 阅读 45

前端

我用 Webpack 打包项目，HTML 里直接写了 img 标签引用 public 目录下的图片，本地开发没问题，但 build 之后图片路径变成 /img/logo.png，实际打包后图片在根目录，导致 404。我试过把图片放 src 里用 require 引入，但想保留 HTML 直接写的方式，有没有办法让 Webpack 正确处理这种静态资源路径？

这是我的 HTML 片段：

<div class="header">
  <img src="/logo.png" alt="Logo" />
</div>

我来解答赞 12 收藏

反馈

2 条解答

皇甫兴敏 Lv1

这个问题的根源是 Webpack 默认不会处理 HTML 中以绝对路径（以 / 开头）引用的资源。

你的情况是这样的：图片在 public 目录，HTML 里写的是 /logo.png，Webpack 在构建时把这个路径处理成了 /img/logo.png，但实际文件在根目录，所以 404 了。

解决办法有两个：

方案一：改用相对路径

把 HTML 里的路径改成相对路径：

然后确保 webpack 配置了正确的 publicPath：

// webpack.config.js

module.exports = {

  output: {

    publicPath: './'  // 或者 '/'

  },

  // ...

};

这样 html-loader 会自动处理相对路径，生成正确的引用。

方案二：使用 copy-webpack-plugin

如果你的图片确实放在 public 目录，而且就想用绝对路径引用，那用 copy-webpack-plugin 来复制静态资源：

const CopyPlugin = require('copy-webpack-plugin');



module.exports = {

  plugins: [

    new CopyPlugin({

      patterns: [

        { from: 'public', to: '' },  // 把 public 目录的内容复制到输出根目录

      ],

    }),

  ],

};

这样 public/logo.png 会被直接复制到 dist/logo.png，HTML 里的 /logo.png 就能正常访问了。

官方文档里说，html-loader 会处理 HTML 中的 src 属性，但默认只处理相对路径和 require() 引入的资源。对于 public 目录的绝对路径引用，要么改用相对路径，要么就用 copy-webpack-plugin 手动复制。

2026-03-20 01:00

夏侯爱华 Lv1

啊这问题我昨晚刚踩过坑...用copy-webpack-plugin把public目录复制到dist就行。配置这样：

// webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");



module.exports = {

  plugins: [

    new CopyPlugin({

      patterns: [

        { from: "public", to: "" },

      ],

    }),

  ],

};

或者干脆把图片扔assets里用file-loader处理也行。

2026-03-08 19:03