Electron使用loadURL加载index.html出现未知代码及图片加载异常问题

问题根源分析 #

• 路径解析偏差：app.getAppPath()在应用启动初期和运行阶段的返回值可能存在差异，手动拼接file://路径时容易出现资源定位错误，导致首次加载图片失败。
• 缓存冲突：Electron的页面缓存机制在刷新时加载了错误的缓存资源，从而显示未知代码。
• 窗口初始化不充分：未等待应用完全就绪就创建窗口并加载页面，引发资源加载异常。

具体修复方案 #

1. 改用loadFile替代loadURL，用__dirname构建可靠路径 #

loadFile会自动处理file://协议和路径格式，比手动拼接更稳定；__dirname始终指向当前脚本所在目录，路径一致性更强：

const path = require('path');
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow(options);
// 构建index.html的绝对路径
const indexHtmlPath = path.join(__dirname, 'index.html');
mainWindow.loadFile(indexHtmlPath);

2. 禁用缓存或隔离缓存分区 #

避免刷新时加载错误的缓存资源，可在窗口配置中禁用缓存，或设置独立的缓存分区：

const mainWindow = new BrowserWindow({
  // 其他配置项
  webPreferences: {
    cache: false,
    // 或者设置独立缓存分区，避免与其他应用冲突
    partition: 'persist:my-app-cache'
  }
});

也可以在加载页面时添加缓存控制头：

mainWindow.loadFile(indexHtmlPath, {
  extraHeaders: 'Cache-Control: no-cache'
});

3. 等待应用ready事件后创建窗口 #

Electron应用必须等待app模块的ready事件触发后，再进行窗口创建和页面加载操作，确保初始化完整：

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow(options);
  const indexHtmlPath = path.join(__dirname, 'index.html');
  mainWindow.loadFile(indexHtmlPath);
});

4. 修正页面内图片的相对路径 #

确保index.html中图片的路径是相对于自身所在目录的相对路径，比如图片放在./assets/images/目录下，标签应写为：

<img src="./assets/images/your-image.png">

不要使用以/开头的绝对路径，因为file://协议的根是磁盘根目录，而非应用根目录。

排查辅助手段 #

打开开发者工具查看网络请求日志，确认资源加载路径是否正确：

mainWindow.webContents.openDevTools();

查看首次加载和刷新时的网络请求错误信息，定位具体的路径问题或资源加载失败原因。

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