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



  • 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:

    quasar_app_screenshot.png

    Cheers,
    Michael



  • 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?



  • @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



  • @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()
    })
    


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

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



  • @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)

    Anmerkung 2019-10-21 183944.png



  • 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.


Log in to reply