electron:托盘图标路径引发的打包问题

Murray_0_0_7

已于 2023-12-28 11:40:17 修改

阅读量676

点赞数 12

分类专栏： electron 文章标签： electron 前端

于 2023-12-28 11:24:42 首次发布

本文链接：https://blog.csdn.net/to_pray/article/details/135264415

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

electron开发: 添加托盘图片时，图片路径引发的打包问题

问题描述

刚接触electron开发，记录一个因托盘图标引起的打包问题: 添加托盘图标后，开发环境可以正常显示，打包后无法正常显示，如图所示：
在这里插入图片描述

原因分析：

由于图片不能正常显示，可能是图片路径造成: 当前路径为相对路径

const setTray = () => {
  tray = new Tray('../static/icon.png')  // 此处为问题代码:相对路径
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', click:()=>{app.quit()}},
  ])
  tray.setContextMenu(contextMenu)
}

解决方案：

将相对路径修改为绝对路径（通过nodeJs的path.join结合__dirname）

const setTray = () => {
  tray = new Tray(path.join(__dirname, '/static/icon.png'))  //  此处为绝对路径：打包后正常
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', click:()=>{app.quit()}},
  ])
  tray.setContextMenu(contextMenu)
}