How to use Image correctly

If reference the image in react

import testPng from './static/text.png'

<Image src={testPng}/>

console:

QPixmap::scaled: Pixmap is a null pixmap

Okay it doesn’t work

If I use resolve to reference the image

const imageUrl = `${path.resolve(__dirname, `./static/text.png`)}`;

<Image src={imageUrl}/>

When I was debugging it was successful

But when I pack:

webpack -p && nodegui-packer --pack ./dist

the image has not been webpacked and is not packed into dist

Image doesn’t show up after I open the app

[a7ul]

Alright! I manage to fix this issue in MacOS @Grewer and @Solant This will be fixed in the next packer release.

But if you would like to fix it in your current setup.

After npx nodegui-packer --init MyApp

Change the contents of deploy/darwin/MyApp.app/Contents/MacOs/qode.json to

{
  "distPath": "../Resources/"
}

Add a new file at deploy/darwin/MyApp.app/Contents/Resources/index.js with the contents

const path = require("path");
// Fix so that macos resources are found correctly
// since webpack will bundle them such that the expected path is /dist from cwd
process.chdir(path.resolve(path.dirname(process.execPath), "..", "Resources"));
// Now start loading the actual bundle
require("./dist");

Now do npx nodegui-packer --pack ./dist

And the assets paths should be resolved correctly!

[a7ul]

Hi @Solant and @Grewer This is because the current working directory for macos is something different. I am currently working on Qode v2.0 which might need a bit of changes in the packer as well. So I ll fix it up in packer alongside it. ETA: this weekend for now. But lets see if I can fix it before that. Thanks for looking into this @Solant