image cannot be resolved when application is packed

[yosle]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.1.1

Electron version

24.0.0

Operating system

Ubuntu 22.04

Last known working Electron Forge version

No response

Expected behavior

When using electron forge webpack typescript template. The image should be packed and resolved when npm run package or npm run make

Actual behavior

I got this code for tray icon:

// some code
    const icon = nativeImage.createFromPath(
      path.resolve("./src/assets/xnauta.png")
    );
        const tray = new Tray(icon);
        // some more code
            console.log("testing the path ", path.resolve("./src/assets/xnauta.png"));

if I run npm start , the tray icon is rendered correctly. icon path path is resolved to : /home/yosle/projects/xnauta-electron/src/assets/xnauta.png

When executing after npm run package or pn run make, tray icon is not rendered , and icon path is resolved to : /home/yosle/projects/xnauta-electron/out/xnauta-linux-x64/resources/app/.webpack/main/assets/xnauta.png If I navigate to this folder , the file doesn't exist.

Also tried this on Windows with similar result, tray icon is not shown, but tray menu options are displayed

Steps to reproduce

run app with npm start, Tray icon is rendered correctly:

run npm run package and execute the binary or run npm run make , install the deb package and execute the app:

Additional information

if I run npm start , the tray icon is rendered correctly. icon path path is resolved to : /home/yosle/projects/xnauta-electron/src/assets/xnauta.png

When executing after npm run package, tray icon is not rendered , and icon path is resolved to : /home/yosle/projects/xnauta-electron/out/xnauta-linux-x64/resources/app/.webpack/main/assets/xnauta.png If I navigate to this folder , the file doesn't exist.

[justgo97]

I had similar issue with an app I been working on, Had to change the path a bit for when the app is packaged

const createTray = () => {
  const iconPath = app.isPackaged
    ? path.join(__dirname, "..", "..", "..", "pomodoro.ico")
    : path.join(__dirname, "..", "..", "src", "pomodoro.ico");

  const icon = nativeImage.createFromPath(iconPath);

[yosletpp]

I had similar issue with an app I been working on, Had to change the path a bit for when the app is packaged

const createTray = () => {
  const iconPath = app.isPackaged
    ? path.join(__dirname, "..", "..", "..", "pomodoro.ico")
    : path.join(__dirname, "..", "..", "src", "pomodoro.ico");

  const icon = nativeImage.createFromPath(iconPath);

Thanks for answering but it's doesn't seem to work for me . There's no PNG or icons in the entire out/xnauta-linux-x64 folder at all. I tried to put the images in the src directory instead of src/assets directory. But packager seems to completely ignore them.

[justgo97]

I had similar issue with an app I been working on, Had to change the path a bit for when the app is packaged

const createTray = () => {
  const iconPath = app.isPackaged
    ? path.join(__dirname, "..", "..", "..", "pomodoro.ico")
    : path.join(__dirname, "..", "..", "src", "pomodoro.ico");

  const icon = nativeImage.createFromPath(iconPath);

Thanks for answering but it's doesn't seem to work for me . There's no PNG or icons in the entire out/xnauta-linux-x64 folder at all. I tried to put the images in the src directory instead of src/assets directory. But packager seems to completely ignore them.

Oh I see, I had that kind of issue too, If I remember correctly I solved it by adding the file to extraResource field in packagerConfig in forge.config.ts file

const config: ForgeConfig = {
  packagerConfig: {
    executableName: "pomodoro",
    icon: "./src/pomodoro.ico",
    asar: false,
    extraResource: ["./src/pomodoro.ico"],
  },

[yosletpp]

Thanks, like you said, add to extraResources. Worked like a charm. Funny thing is I couldn't find any of this in the official docs. I would guess it should be some kind of tip in the tray notification section. Left a star in your project.