Touchbar icon with custom image doesn't load in Electron

Question

I'm trying to build a button with a custom image on the Touchbar in Electron. When testing via "electron ." the image shows up - as published macOS app the button is empty and has no image in the Touchbar. The app is build and published via electron-builder. Did I miss something?

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;

Full code available in dev branch on Github: https://github.com/stefansl/image-shrinker/blob/dev/main.js

Answer 1

The TouchBarButton components accepts an icon option as a NativeImage object. If you only have one image to show, its maximum dimensions is 16x16. This code works perfectly:

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',
});