App Icon for frameless electron app not showing in build (Solved)

[mboeni]

Hi there

I am creating an app for browser, mobile and desktop - with the current focus being on getting it working on the desktop.

I am using a frameless q-bar like so:

    <q-header elevated>
      <q-bar class="q-electron-drag">
        <q-icon name="img:statics/icons/icon.png" />
        <div>NX Client v{{this.$appVersion}}</div>
        <q-space/>
        <q-btn dense flat icon="minimize" @click="minimize"/>
        <q-btn dense flat icon="crop_square" @click="maximize"/>
        <q-btn dense flat icon="close" @click="closeApp"/>
      </q-bar>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          icon="menu"
          aria-label="Menu"
        />

        <q-space/>
<!--         <div>NXS Library v{{this.$nxsVersion}} / NXS Server v{{this.$nxsServerVersion}}</div> -->
      </q-toolbar>
    </q-header>

My issue is that I seem to access the icon (see line 3) in the wrong way. The icon correctly shows up in dev mode (quasar dev -m electron) but throws a not found error when building the application using quasar build -m electron.

Two questions here:

1. Where do I need to place the icon in the project structure?
2. How do I correctly access it in places like: <q-icon name="img:statics/icons/icon.png" />

For reference, this is how it should look like:

Cheers,
Michael

[mboeni]

Still haven’t found a solution to this. Additional research confirmed that <q-icon name="img:statics/icons/icon.png" /> should actually be the correct way to make assets work with all build targets.

Any ideas?

[patryckx]

@mboeni Hello! In Electron static assets work in a particular way.

See more about https://quasar.dev/quasar-cli/developing-electron-apps/electron-static-assets

[patryckx]

@mboeni To use the tray icon for example, I decide to follow the way:

electron-main.js

if (process.env.PROD) {
  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
}

let tray = null
app.on('ready', () => {
  createWindow()
  tray = new Tray(__statics + '/icon.ico')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Fechar', type: 'normal', click: closeWindow  }
  ])
  // mainWindow.minimize()
  tray.setContextMenu(contextMenu)
  mainWindow.hide()
})

[mboeni]

@patryckx Ah you do it directly in code. Thanks, I’ll try that!

The icon lies in ...\src\statics\icon.ico, right?

[mboeni]

@patryckx The tray icon and OS icon show up correctly, just the icon in my custom chrome does not when I build the app:

• App behind (built/packaged version)
• App in front (dev version)

[mboeni]

Solved it (at least for my case):

This does not work:
<q-icon name="img:statics/icons/icon.png" />

This works for dev and build:
<img alt="App Logo" src="~assets/icon.png">

Cheers,
M.

PS: I tried the ~assets/icon.png path with q-icon and it did not work for me.