Derpgon cz fix/stable23/image data urls

src/nodes/ImageView.vue

@@ -116,7 +116,7 @@ export default {
 			}
 		},
 		imageUrl() {
-			if (this.isRemoteUrl || this.isPreviewUrl) {
+			if (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl) {
 				return this.src
 			}
 			if (this.hasPreview && this.mime !== 'image/gif') {
@@ -132,6 +132,9 @@ export default {
 			return this.src.match(/^(\/index.php)?\/core\/preview/)
 				|| this.src.match(/^(\/index.php)?\/apps\/files_sharing\/publicpreview\//)
 		},
+		isDataUrl() {
+			return this.src.startsWith('data:')
+		},
 		basename() {
 			return decodeURI(this.src.split('?')[0])
 		},
@@ -218,7 +221,6 @@ export default {
 			return
 		}
 		const img = new Image()
-		img.src = this.imageUrl
 		img.onload = () => {
 			this.imageLoaded = true
 		}
@@ -227,6 +229,7 @@ export default {
 			this.imageLoaded = false
 			this.loaded = true
 		}
+		img.src = this.imageUrl
 	},
 	methods: {
 		updateAlt() {

src/tests/nodes/ImageView.spec.js

@@ -64,4 +64,10 @@ describe('Image View src attribute based on markdown', () => {
 		expect(wrapper.find('.image__main').attributes('src'))
 			.toBe('https://nextcloud/index.php/apps/files_sharing/publicpreview/CSYoWifBzrsMWeA?file=/deck11-calendar.png&x=1760&y=990&a=true')
 	})
+
+	test('data urls are used as is', () => {
+		const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='
+		const wrapper = factory({src})
+		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
+	})
 })