javascript - 带有自定义图像的触摸栏图标无法在 Electron 中加载

Question

我正在尝试在 Electron 的触摸栏上构建一个带有自定义图像的按钮。通过“Electron ”测试时。图像显示 - 作为发布的 macOS 应用程序，该按钮为空，并且触摸栏中没有图像。该应用程序是通过 electro-builder 构建和发布的。我错过了什么吗？

const {app, BrowserWindow, ipcMain, dialog, TouchBar} = require('electron');
const {TouchBarButton} = TouchBar;

// Touchbar support
let touchBarResult = new TouchBarButton({
    'label': 'Let me shrink some images!',
    'backgroundColor': '#000000',
});

let touchBarIcon = new TouchBarButton({
    'backgroundColor': '#000000',
    'icon': path.join(__dirname, 'build/18x18@2x.png'),
    'iconPosition': 'center',
});

const touchBar = new TouchBar([
    touchBarResult
]);

// Add Touchbar icon
touchBar.escapeItem = touchBarIcon;

完整代码可在 Github 上的 dev 分支中找到: https://github.com/stefansl/image-shrinker/blob/dev/main.js

Answer 1

TouchBarButton 组件接受 icon 选项作为 NativeImage 对象。如果您只显示一张图像，则其最大尺寸为 16x16。此代码完美运行:

const {nativeImage} = require('electron');
// ...
let touchBarIcon = new TouchBarButton({
  'backgroundColor': '#000000',
  'icon': nativeImage.createFromPath(path.join(__dirname, 'build/18x18@2x.png')).resize({
    width: 16,
    height: 16,
  }),
  'iconPosition': 'center',
});