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

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

前端

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

这是我的 HTML 片段：

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

我来解答赞 2 收藏

反馈

1 条解答

夏侯爱华 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