Images are very important for making your app more interesting.
In NodeGui, QLabel is typically used for displaying text, but it can also display an image.
A very minimal example would look like this:
- We first create a label using QLabel.
- Then we create an instance of QPixmap.
QPixmapis used to represent the image in memory. QPixmap is not a widget, so it can’t be shown on the screen as it is.
- Hence, we use QLabel instance and set QPixmap to it.
The result would look like this:
Loading an image using a url
Lets say we want to load an image from a URL on the internet. In this case we can't use the
load() method of QPixmap since its only reserved for local file system images.
Instead, we’ll download the image using axios as a buffer and use the QPixmap's method loadFromData instead.
So let’s start with the axios installation:
Now let’s create a function that will take a URL as a parameter and will return a configured QMovie instance for the GIF:
getPixmap function takes in a URL, tells axios to download the image as a buffer, and then uses that buffer to create a QPixmap instance.
Since getPixmap returns a promise, we need to make some changes to the code. After some minor refactoring, we end up with the following.
And the result would look like this:
Showing large images
The above examples wont allow you to show a huge image without either cutting it off or making the widget huge.
In order to do that:
- You can create the image instance using QPixmap
- Set the image instance to a QLabel
- And finally set the QLabel to a QScrollArea that allows you to scroll the image if the size of the image is too big.
In order to use animated images
- Instead of QPixmap use QMovie
- And instead of a label's
More details on it can be seen on this blog post : https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/