Image component doesn't display images
roman01la opened this issue · comments
Describe the bug
Specifying any type of a resource (either URL or local file system path) for Image component doesn't display pixel data on a screen.
Node process prints the following
QPixmap::scaled: Pixmap is a null pixmap
To Reproduce
<Image source={{ uri: "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" }}
style={{ width: 100, height: 100 }}/>Expected behavior
Image component should display loaded pixel data
Versions:
- OS: macOS
- Version 2.0.0
- Node version 10.16.3
Looks like the only supported image format out of the box is PNG. JPEG and GIFs are not recognized.
Your example seems to work for me. I other tried JPGs and GIFs as well. GIF animation doesn't seem to work, but everything else works. Could you post the full code and make sure you don't have any network troubles? Try downloading it and loading it locally.
Are you on macOS?
I tested on Linux, but I can confirm its an issue on Mac. Seems like I need to include qjpeg with Qt: https://forum.qt.io/topic/1003/jpeg-support/4
Yeah, that was exactly my impression, that on macOS only PNGs are supported out of the box.
Hello, this problem occurs with me in Window. Here my code
<App> <Window style={{ height: '720', width: '1024' }} > <Image resizeMode="center" source={{ uri: "https://image.freepik.com/free-vector/abstract-social-media-icons-set_1055-5053.jpg" }} style={{ width: 100, height: 100 }} /> </Window> </App>
I go to node_modules\proton-native\bin\components\image.js => updateProps => source => console.log download data
console.log(out); element.setFromData(out); element.scaleImage(pixSize.width, pixSize.height, pixSize.resizeMode);
And see that data was downloaded
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 60 00 60 00 00 ff fe 00 3b 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... 88699 more bytes> QPixmap::scaled: Pixmap is a null pixmap
But function element.scaleImage(pixSize.width, pixSize.height, pixSize.resizeMode); give exception and not show data