Electron 打包后无法加载本地图片资源怎么办?

金梅的笔记 阅读 18

我在开发 Electron 应用时,本地调试一切正常,图片都能显示。但用 electron-builder 打包成安装包后,页面里的图片全变成裂图了,路径好像不对。

我试过把图片放在 public 目录下,用相对路径 ./images/logo.png 引用,也试过用 __dirname 拼接路径,但打包后还是加载失败。控制台报错说找不到文件,是不是打包后路径结构变了?

我的图片是这样引用的:

<img src="./images/logo.png" alt="logo">
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
Mr.春芹
Mr.春芹 Lv1
打包后路径确实会变,用 process.resourcesPath 来定位资源目录,在主进程中设置好然后传给渲染进程。差不多这样写:

const path = require('path')
win.webContents.send('set-resource-path', process.resourcesPath)


在渲染进程里改成这样引用图片:<img src={${resourcePath}/resources/app.asar.unpacked/images/logo.png} alt="logo">

记得把图片放到合适的位置,别放错了,打包的时候容易出这种问题。累死了,希望能帮到你。
点赞
2026-03-25 23:11