How to use Image correctly

[Grewer]

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

[Grewer]

If I combine these two cases, it is ok, but I cannot know the address after packaging.

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

const imageUrl = path.resolve(__dirname, `../dist`, testPng)

console.log(imageUrl)

[a7ul]

Hi @Grewer

Looks like a webpack issue. Can you reverse the value of __filename and ___dirname in webpack config?

[Grewer]

my project clone from https://github.com/nodegui/react-nodegui-starter

webpack.config has not changed

@master-atul

[Grewer]

<Text>{`${path.resolve(__dirname).toString()}`}

after packing:

print:

/src

[a7ul]

Have you changed to

__dirname: false,
 __filename: false

?

[Grewer]

ohh
it succeeded

Although successful, it is still so laborious to use

[Grewer]

Thank you

[a7ul]

Although successful, it is still so laborious to use

Could you help me in understanding why you feel so ?
I want to make it as easy as possible. @Grewer

[Grewer]

Compare the use of images in React

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

<Image src={testPng}/>

Now to quote the picture in the project, this sentence is needed:

const imageUrl = path.resolve(__dirname, `../dist`, testPng)

can extract a method

there is also the need to change here when you want to change the /dist path

Although I mean laborious, it is also compared with React, which is actually okay.

[Solant]

@Grewer I did some changes to file-loader in react starter, so now you should be able to import images just like in react

https://github.com/nodegui/react-nodegui-starter/blob/master/webpack.config.js#L34

for already created project you can do the same change with publicPath: 'dist' and no more path.resolves

[a7ul]

@all-contributors add @Solant for code

Thank for fixing this issue
Closing this

[allcontributors]

@master-atul

I've put up a pull request to add @Solant! 🎉

[Grewer]

Unfortunately this modification cannot be referenced after build

Because the reference is a relative reference, and the picture can only be referenced by absolute reference after packaging, the path in front of the referenced picture must be the path of the application plus the path of the picture resource.

@master-atul @Solant