From 73dcc40929bc1a1ecaa7466496d07f4695853ca9 Mon Sep 17 00:00:00 2001
From: Atul R <atulanand94@gmail.com>
Date: Sat, 28 Mar 2020 23:09:16 +0100
Subject: [PATCH] Adds image example

---
 website/docs/guides/images.md | 108 +++++++++++++++++++++++++++++++++-
 1 file changed, 107 insertions(+), 1 deletion(-)

diff --git a/website/docs/guides/images.md b/website/docs/guides/images.md
index 31e67b13b..3e99eaf50 100644
--- a/website/docs/guides/images.md
+++ b/website/docs/guides/images.md
@@ -3,4 +3,110 @@ sidebar_label: Images
 title: Images
 ---
 
-WIP
+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:
+
+```js
+const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');
+
+const win = new QMainWindow();
+const label = new QLabel();
+
+const absoulteImagePath = '/Users/atulr/Project/nodegui/nodegui/extras/assets/logox200.png';
+const image = new QPixmap();
+image.load(absoulteImagePath);
+
+label.setPixmap(image);
+
+win.setCentralWidget(label);
+win.show();
+global.win = win;
+```
+
+Here,
+
+-   We first create a label using QLabel.
+-   Then we create an instance of QPixmap. `QPixmap` is 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:
+
+<img src="https://github.com/nodegui/nodegui/releases/download/assets/image-example.png" alt="image example" style={{width: '100%', maxWidth: 400}}/>
+
+## 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:
+
+```sh
+npm i axios
+```
+
+Now let’s create a function that will take a URL as a parameter and will return a configured QMovie instance for the GIF:
+
+```js
+const axios = require('axios');
+
+async function getPixmap(url) {
+    const { data } = await axios.get(url, { responseType: 'arraybuffer' });
+    const pixmap = new QPixmap();
+    pixmap.loadFromData(data);
+    return pixmap;
+}
+```
+
+The `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.
+
+```js
+const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');
+const axios = require('axios');
+async function getPixmap(url) {
+    const { data } = await axios.get(url, { responseType: 'arraybuffer' });
+    const pixmap = new QPixmap();
+    pixmap.loadFromData(data);
+    return pixmap;
+}
+async function main() {
+    const win = new QMainWindow();
+    const label = new QLabel();
+    const image = await getPixmap('https://upload.wikimedia.org/wikipedia/commons/9/96/Nature-morocco.jpg');
+    label.setPixmap(image);
+    win.setCentralWidget(label);
+    win.show();
+    global.win = win;
+}
+main().catch(console.error);
+```
+
+And the result would look like this:
+
+<img src="https://github.com/nodegui/nodegui/releases/download/assets/image-from-url.png" alt="image url example" style={{width: '100%', maxWidth: 400}}/>
+
+## Some tips
+
+### 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.
+
+### Animated images
+
+In order to use animated images
+
+-   Instead of QPixmap use QMovie
+-   And instead of a label's `setPixmap` method use `setMovie`
+
+More details on it can be seen on this blog post : [https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/](https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/)