如何在electron-builder中获取（托盘）图标路径/图像

Question

我正在使用electron-react-boilerplate开发Electron应用程序（该程序使用 electron-builder打包应用程序）。

我想创建系统托盘，但需要图标路径或本地图像。问题在于如何从electron-builder检索图标图像，或者如何告诉electron-builder将图标目录包含在资源中（而无需打包），以便我可以使用： appIcon = new Tray（iconPath | nativeImage）

- bxpd

Answer 1

我在非打包资产方面遇到了一些困难（例如媒体或JSON配置文件），主要是因为我之前不熟悉Electron。 :) 我构建了一个简单的仅托盘的应用程序，我不想每次更改图标时重新打包。

如果您也计划使用可变/动态资产，您可以使用此属性区分“开发”和“生产”： https://electronjs.org/docs/api/app#appispackaged-readonly 请确保在package.json中有这个内容：

"build": {
  ...
  "extraResources": [
    "./assets/**"
  ],
}

https://www.electron.build/configuration/contents#extraresources

然后在你的代码中可以这样写：

const assetsPath = app.isPackaged ? path.join(process.resourcesPath, "assets") : "assets";

当然，您也可以使用不同的路径来存储资产，与打包应用程序文件夹无关，例如用户的主目录或用户的文档：

https://electronjs.org/docs/api/app#appgetpathname

• Electron v7.0.1
• electron-builder 21.2.0

- Daniel Kehlibarov

---

非常感谢您的回答。您的回答是唯一有效且运行良好的。我甚至不知道有关extraResources选项的信息。 - Trevor

但是有必要使用extraResources吗？因为没有使用extraResources，我的资源会被正确地复制到dist/AppName/assets文件夹中，并且我从那里选择一个图标，所以我不明白为什么我的图标不能正常工作。我的其他图标在没有extraResources的情况下都可以正常工作，所以托盘图标必须放在资源文件中才能正常工作吗？ - Franco

Answer 2

首先，您需要告诉electron-builder需要复制哪些额外文件到输出构建中。我像下面这样复制每个操作系统的本地驱动程序，但您应该能够根据自己的需求进行调整。 "to": "resources" 意味着您稍后可以使用下面的代码找到这些文件。

"build": {
...
"extraFiles": [
  {
    "from": "resources/${os}/drivers",
    "to": "resources",
    "filter": [
      "**/*"
    ]
  }
],

然后，在electron中访问该路径，您可以使用以下代码：

const path = require('path');
const imgPath = path.join(process.resourcesPath, 'image.png')

如果您在主进程中，可以省略remote部分。

然后，您可以使用nativeImage.createFromPath获取本地图像：

const nativeImage = require('electron').nativeImage
let image = nativeImage.createFromPath(imgPath)

- Tim

---

你可以使用 process.resourcesPath 来获取资源目录的路径。 - develar

Answer 3

谢谢，Tim。你的回答给了我一个很好的思路。根据我运行应用程序的方式（使用Electron或从安装的.deb文件中），我进行了一些补充：

"build": {
    ...
    "extraFiles": [
        {
            "from": "assets",
            "to": "resources",
            "filter": [
                "**/*"
            ]
        }
    ]
    ...
}

然后：

let imgPath = process.env.DEV ? "assets/icon.png" : path.join(process.resourcesPath, "icon.png");
tray = new Tray(imgPath);

- Maklaud