--- a/client/src/components/Pdftool.vue	Wed Jul 03 13:12:32 2019 +0200
+++ b/client/src/components/Pdftool.vue	Wed Jul 03 16:23:22 2019 +0200
@@ -225,9 +225,44 @@
         )
           .then(response => {
             this.templateData = response.data.template_data;
-            this.form.format = this.templateData.properties.format;
-            this.form.paperSize = this.templateData.properties.paperSize;
-            this.form.resolution = this.templateData.properties.resolution;
+            /**
+             * In order to render the images from the template, we need to convert
+             * each image to dataURIs. Since this happens asynchronous,
+             * we need to wrap each image into its own promise and only after all are
+             * finished, we continue with the flow.
+             */
+            const imageElementLoaders = response.data.template_data.elements.reduce(
+              (o, n, i) => {
+                if (n.type === "image") {
+                  o.push(
+                    new Promise(resolve => {
+                      const image = new Image();
+                      image.onload = function() {
+                        var canvas = document.createElement("canvas");
+                        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
+                        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
+                        canvas.getContext("2d").drawImage(this, 0, 0);
+                        resolve({
+                          index: i,
+                          url: canvas.toDataURL("image/png")
+                        });
+                      };
+                      image.src = n.url;
+                    })
+                  );
+                }
+                return o;
+              },
+              []
+            );
+            Promise.all(imageElementLoaders).then(values => {
+              values.forEach(v => {
+                response.data.template_data.elements[v.index].url = v.url;
+              });
+              this.form.format = this.templateData.properties.format;
+              this.form.paperSize = this.templateData.properties.paperSize;
+              this.form.resolution = this.templateData.properties.resolution;
+            });
           })
           .catch(e => {
             const { status, data } = e.response;
@@ -804,8 +839,6 @@
     }
   },
   mounted() {
-    this.form.template = this.templates[0];
-    this.templateData = this.form.template;
     HTTP.get("/templates/map", {
       headers: {
         "X-Gemma-Auth": localStorage.getItem("token"),
@@ -817,6 +850,9 @@
           this.templates = response.data;
           this.form.template = this.templates[0];
           this.applyTemplateToForm();
+        } else {
+          this.form.template = this.templates[0];
+          this.templateData = this.form.template;
         }
       })
       .catch(e => {