使用asset/resource导入图片URL时路径错误及渲染问题咨询

图片实际生成路径为~/Documents/restaurant-page/dist/images/52e944639d832ccc4639.png，但JavaScript中导入的URL却变成了/home/amanr/Documents/restaurant-page/distimages/52e944639d832ccc4639.png（dist与images之间缺少斜杠/）。直接打开HTML文件时图片无法渲染，但通过webpack-dev-server启动的服务器打开则显示正常，请问原因是什么？部署后是否会受此影响？

Webpack 配置 #

import path from 'node:path';
import HtmlWebpackPlugin from "html-webpack-plugin";

const __dirname = import.meta.dirname;

export default {
  entry: "./src/index.js",
  output: {
    publicPath: path.resolve(__dirname, "dist/"),
    filename: "index.bundle.js",
    assetModuleFilename: 'images/[hash][ext][query]',
  },

  mode: "development",

  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src/template.html"),
    filename: 'index.bundle.html'
  })],

  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            targets: "defaults",
            presets: [
              ['@babel/preset-env']
            ]
          }
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
        type: 'asset/resource'
      },
    ],
  },

  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  }
};

导入代码 #

import customImg from '../images/custom.png';

export function loadHomePage() {
    const heroDiv = document.createElement('div');
    heroDiv.classList.add('hero', 'min-h-screen');
    console.log(customImg);
    heroDiv.style.backgroundImage = `url(${customImg})`;

// ... 其他代码
}

1. webpack-dev-server 能正常显示的逻辑 #

webpack-dev-server 运行时不会将打包文件写入本地dist目录，而是将所有资源保存在内存中。当处理资源请求时，它会自动解析配置中的路径规则，即使代码里的URL缺失了斜杠，dev server也会自动补全，匹配到内存中正确的图片资源。

另外，dev server的static.directory配置指向了dist目录，当它接收到distimages/xxx.png的请求时，会尝试在dist目录下查找images/xxx.png（相当于自动修复了路径错误），因此能正常返回图片。

2. 直接打开HTML文件失败的原因 #

直接打开本地HTML文件时，浏览器使用file://协议，会严格按照代码中的路径去查找文件——也就是不存在的/home/amanr/Documents/restaurant-page/distimages/xxx.png，而真实图片路径是dist/images/xxx.png，所以浏览器找不到资源，无法渲染图片。

3. 路径错误的根源 #

问题出在output.publicPath的配置上：你设置了本地磁盘的绝对路径path.resolve(__dirname, "dist/")，但Webpack的publicPath应该设置为相对路径（如./）或服务器根路径（如/），而非本地绝对路径。

path.resolve(__dirname, "dist/")返回的路径末尾没有斜杠（例如/xxx/restaurant-page/dist），和assetModuleFilename的images/xxx.png直接拼接后，就变成了distimages/xxx.png，这就是缺失斜杠的直接原因。

部署后一定会受影响，原因如下：

• 生产打包时，Webpack会基于publicPath生成资源URL，如果publicPath还是本地绝对路径，生成的URL会包含你的本地磁盘路径（如/home/amanr/...），这在服务器环境中完全不存在，浏览器无法加载资源。
• 即使修改publicPath，如果路径拼接的问题没解决，生成的URL仍会缺失斜杠，服务器会返回404错误，图片无法正常显示。

修改output.publicPath为相对路径或服务器根路径，示例如下：

output: {
  // 若需要本地打开HTML测试，用相对路径
  publicPath: "./",
  // 若部署在服务器根目录，用根路径
  // publicPath: "/",
  filename: "index.bundle.js",
  assetModuleFilename: 'images/[hash][ext][query]',
}

修改后Webpack会正确拼接路径，生成./images/xxx.png或/images/xxx.png的有效URL，无论本地打开还是部署到服务器都能正常加载图片。

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