diff --git a/package-lock.json b/package-lock.json
index 738f141ce..0b53ce218 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10645,6 +10645,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.7.tgz",
       "integrity": "sha512-g7ADfQ82QU+j6F/bVDioVQf2ccIMYLuR4E8ev+RsDBlmwRkhGO3HhgF4PF9vpwjdPpxyb1zzLur2nQ2oIMAMEg=="
     },
+    "vue-async-computed": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.6.1.tgz",
+      "integrity": "sha512-8FFDTqfdvKrzK5Fr7nNHZgP6sQ2hTUELTrLn25i8VW/g06MztD+FOe1gs0RYVpRkPlcrykf2hbJxNYra1c4OGg=="
+    },
     "vue-click-outside": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
diff --git a/package.json b/package.json
index 13dd11451..febfb20a2 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "nextcloud-server": "^0.15.9",
     "nextcloud-vue": "^0.8.0",
     "vue": "^2.6.7",
+    "vue-async-computed": "^3.6.1",
     "xml2js": "^0.4.19"
   },
   "browserslist": [
diff --git a/src/components/Images.vue b/src/components/Images.vue
index cad8bc721..6ff376701 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<img
-		:src="path"
+		:src="data"
 		:style="{
 			height: height + 'px',
 			width: width + 'px'
@@ -32,19 +32,46 @@
 
 <script>
 import mime from 'Mixins/Mime'
+import axios from 'axios'
+import Vue from 'vue'
+import AsyncComputed from 'vue-async-computed'
+
+Vue.use(AsyncComputed)
 
 export default {
 	name: 'Videos',
 	mixins: [
 		mime
 	],
+	asyncComputed: {
+		data() {
+			if (this.mime !== 'image/svg+xml') {
+				return this.path
+			}
+			return this.getBase64FromImage()
+		}
+	},
 	methods: {
 		updateImgSize() {
 			const naturalHeight = this.$el.naturalHeight
 			const naturalWidth = this.$el.naturalWidth
-			this.updateHeightWidth(naturalHeight, naturalWidth)
+			// displaying tiny images makes no sense,
+			// let's try to an least dispay them at 100x100
+			this.updateHeightWidth(
+				Math.max(naturalHeight, 100),
+				Math.max(naturalWidth, 100)
+			)
 
 			this.doneLoading()
+		},
+		/**
+		 * Manually retrieve the path and return its base64
+		 *
+		 * @returns {String}
+		 */
+		async getBase64FromImage() {
+			const file = await axios.get(this.path)
+			return `data:${this.mime};base64,${btoa(file.data)}`
 		}
 	}
 }
diff --git a/src/models/images.js b/src/models/images.js
index b24d8fdb2..c612c9868 100644
--- a/src/models/images.js
+++ b/src/models/images.js
@@ -30,7 +30,8 @@ export default {
 		'image/jpeg',
 		'image/gif',
 		'image/x-xbitmap',
-		'image/bmp'
+		'image/bmp',
+		'image/svg+xml'
 	],
 	component: Images
 }