diff --git a/HISTORY.rst b/HISTORY.rst
index 34d5a796fe..d115ec07cb 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -1,5 +1,9 @@
 3.2 (2018-XX-XX)
 ================
+- Documents: Add a server side template for invalid documents.
+  The new template can be accessed via the templates API.
+  Improve the way invalid documents are detected in the JavaScript
+  code.
 - Pagination: Fix page AJAX reload when clicking on pagination active page
   link.
 - Pagination: Add pure pagination subclass that supports custom page
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_image.js b/mayan/apps/appearance/static/appearance/js/mayan_image.js
index d04f896832..869faf547e 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_image.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_image.js
@@ -6,10 +6,11 @@ class MayanImage {
         this.load();
     }
 
-    static intialize () {
-        var app = this;
+    static intialize (options) {
+        this.options = options || {};
+        this.options.templateInvalidDocument = this.options.templateInvalidDocument || '<span>Error loading document image</span>';
 
-        this.fancybox = $().fancybox({
+        $().fancybox({
             animationDuration : 300,
             buttons : [
                 'fullScreen',
@@ -58,30 +59,32 @@ class MayanImage {
     }
 
     static timerFunction () {
-        $.fn.matchHeight._maintainScroll = true;
         $.fn.matchHeight._update();
     }
 
     load () {
-        var self = this;
         var container = this.element.parent().parent().parent();
+        var dataURL = this.element.attr('data-url');
 
-        this.element.attr('src', this.element.attr('data-url'));
-        this.element.on('error', function() {
-            // Check the .complete property to see if it is a real error
-            // or it was a cached image
-            if (this.complete === false) {
-                // It is a cached image, set the src attribute to trigger
-                // it's display.
-                this.src = this.src;
-            } else {
-                container.html(MayanImage.templateInvalidDocument);
-            }
-        });
-
-        $.fn.matchHeight._maintainScroll = true;
+        if (dataURL === '') {
+            container.html(MayanImage.options.templateInvalidDocument);
+        } else {
+            this.element.attr('src', dataURL);
+            this.element.on('error', function() {
+                // Check the .complete property to see if it is a real error
+                // or it was a cached image
+                if (this.complete === false) {
+                    // It is a cached image, set the src attribute to trigger
+                    // it's display.
+                    this.src = this.src;
+                } else {
+                    container.html(MayanImage.options.templateInvalidDocument);
+                }
+            });
+        }
     };
 }
 
-MayanImage.templateInvalidDocument = $('#template-invalid-document').html();
 MayanImage.timer = setTimeout(null);
+
+$.fn.matchHeight._maintainScroll = true;
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index 3a98e2d645..b986ffc988 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/mayan/apps/appearance/templates/appearance/root.html
@@ -61,17 +61,6 @@
             </div>
         </div>
 
-        <script id="template-invalid-document" type="text/x-template">
-            <div class="text-center" style="border: height: 100%;">
-                <div class="fa-3x">
-                    <span class="fa-layers fa-fw">
-                        <i class="far fa-file text-primary"></i>
-                        <i class="fa-inverse fas fa-times text-danger" data-fa-transform="shrink-6"></i>
-                    </span>
-                </div>
-            </div>
-        </script>
-
         <script id="template-error" type="text/x-template">
             <div class="content">
                 <h2 class="title">{% blocktrans %}Server communication error{% endblocktrans %}</h2>
@@ -120,7 +109,9 @@
             var app = new MayanApp();
 
             var afterBaseLoad = function () {
-                MayanImage.intialize();
+                MayanImage.intialize({
+                    templateInvalidDocument: '{% spaceless %}{% include "documents/invalid_document.html" %}{% endspaceless %}'
+                });
                 app.doToastrMessages();
                 app.resizeFullHeight();
                 app.setupSelect2();
diff --git a/mayan/apps/documents/apps.py b/mayan/apps/documents/apps.py
index 08e7d93a19..c0134678d6 100644
--- a/mayan/apps/documents/apps.py
+++ b/mayan/apps/documents/apps.py
@@ -14,7 +14,7 @@ from common import (
     MayanAppConfig, MissingItem, menu_facet, menu_main, menu_object,
     menu_secondary, menu_setup, menu_sidebar, menu_multi_item, menu_tools
 )
-from common.classes import ModelField
+from common.classes import ModelField, Template
 from common.dashboards import dashboard_main
 from common.signals import post_initial_setup
 from common.widgets import TwoStateWidget
@@ -223,6 +223,11 @@ class DocumentsApp(MayanAppConfig):
             model=DocumentVersion, related='document',
         )
 
+        Template(
+            name='invalid_document',
+            template_name='documents/invalid_document.html'
+        )
+
         # Document and document page thumbnail widget
         document_page_thumbnail_widget = DocumentPageThumbnailWidget()
 
diff --git a/mayan/apps/documents/models.py b/mayan/apps/documents/models.py
index f5b973e01d..71e035f3b5 100644
--- a/mayan/apps/documents/models.py
+++ b/mayan/apps/documents/models.py
@@ -274,8 +274,6 @@ class Document(models.Model):
         latest_version = self.latest_version
         if latest_version:
             return latest_version.get_api_image_url(*args, **kwargs)
-        else:
-            return '#'
 
     def invalidate_cache(self):
         for document_version in self.versions.all():
@@ -511,8 +509,6 @@ class DocumentVersion(models.Model):
         first_page = self.pages.first()
         if first_page:
             return first_page.get_api_image_url(*args, **kwargs)
-        else:
-            return '#'
 
     def get_intermidiate_file(self):
         cache_filename = self.cache_filename
diff --git a/mayan/apps/documents/templates/documents/forms/widgets/document_page_image.html b/mayan/apps/documents/templates/documents/forms/widgets/document_page_image.html
index 87c26a5011..7f9dc6ea31 100644
--- a/mayan/apps/documents/templates/documents/forms/widgets/document_page_image.html
+++ b/mayan/apps/documents/templates/documents/forms/widgets/document_page_image.html
@@ -7,9 +7,11 @@
     >
         {% get_icon 'documents.icons.icon_document_image_loading'  %}
     </span>
+    {# Used with the default filter to typecast Python's None to the data attribute's empty string  #}
+    {% get_api_image_url instance width=image_width height=image_height zoom=image_zoom rotation=image_rotation as image_url %}
     <img
         class="thin_border {{ image_classes }}"
-        data-url="{% get_api_image_url instance width=image_width height=image_height zoom=image_zoom rotation=image_rotation %}"
+        data-url="{{ image_url|default:'' }}"
         src="#"
         style="{% if image_max_height %}max-height: {{ image_max_height }}; {% endif %}"
      />
diff --git a/mayan/apps/documents/templates/documents/invalid_document.html b/mayan/apps/documents/templates/documents/invalid_document.html
new file mode 100644
index 0000000000..62707e27b4
--- /dev/null
+++ b/mayan/apps/documents/templates/documents/invalid_document.html
@@ -0,0 +1,8 @@
+<div class="text-center" style="border: height: 100%;">
+    <div class="fa-3x">
+        <span class="fa-layers fa-fw">
+            <i class="far fa-file text-primary"></i>
+            <i class="fa-inverse fas fa-times text-danger" data-fa-transform="shrink-6"></i>
+        </span>
+    </div>
+</div>