如何在Webpack项目中引用非应用目录的全局路径图片

你遇到的问题其实是Electron的Chromium内核对路径的解析逻辑导致的——当你直接写/users/name/home/Desktop/test.svg时，浏览器会把这个相对根路径的地址拼接到当前页面的服务地址（也就是Webpack Dev Server的http://localhost:8080/）后面，自然找不到本地磁盘上的文件。

下面给你两个实用的解决方法：

方法一：直接使用file://协议指定本地路径 #

Electron允许通过file://协议直接访问本地文件系统，你只需要把图片路径改成带协议的格式即可：

<img src="file:///users/name/home/Desktop/test.svg"/>

注意这里是三个斜杠：file:/// + 你的本地绝对路径。Windows系统下格式类似file:///C:/Users/name/Desktop/test.svg。

方法二：动态获取系统路径（更适配跨平台） #

如果你的图片路径需要动态生成，或者想兼容不同操作系统，可以利用Electron的API获取标准系统路径，再拼接成file://地址：

1. 首先确保主进程的BrowserWindow配置中开启必要权限（Electron 14+默认禁用远程模块）：

// 主进程代码（比如main.js）
const { BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      enableRemoteModule: true, // 开启remote模块
      contextIsolation: false // 配合remote模块使用，或改用preload脚本
    }
  });
  win.loadURL('http://localhost:8080');
}

2. 在渲染进程中获取桌面路径并生成图片地址：

// 渲染进程代码（比如你的src/index.js或组件中）
const { remote } = require('electron');
const desktopPath = remote.app.getPath('desktop'); // 获取系统桌面路径
const imgSrc = `file://${desktopPath}/test.svg`;

// 把生成的路径赋值给img元素
const img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);

如果想遵循Electron新规范，也可以通过IPC通信让主进程获取路径后传给渲染进程：主进程监听IPC请求返回路径，渲染进程用ipcRenderer发送请求并接收结果，这样更安全。

为什么Webpack配置不需要修改？ #

你的Webpack配置里，file-loader只处理src目录下的资源，这是合理的——Webpack的职责是打包项目内的资源，而你要访问的是项目外的全局文件，这类资源不需要经过Webpack处理，直接用Electron的本地文件访问能力即可。

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