From 1b368291eb9a2f0fe090d42481df689b313ca0d8 Mon Sep 17 00:00:00 2001
From: ian <licitdev@gmail.com>
Date: Fri, 22 Jul 2022 22:17:14 +0800
Subject: [PATCH] Revert to <img> for image editor (#14576)

* Revert to <img> for image editor

* Fix typings
---
 .../components/image-editor/image-editor.vue    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 21996b14ca..c5ed40d1cf 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -22,7 +22,7 @@
 
 		<div v-show="imageData && !loading && !error" class="editor-container">
 			<div class="editor">
-				<v-image ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
+				<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
 			</div>
 
 			<div class="toolbar">
@@ -80,7 +80,7 @@
 							v-if="imageData"
 							clickable
 							:active="aspectRatio === imageData.width / imageData.height"
-							@click="aspectRatio = imageData.width / imageData.height"
+							@click="setAspectRatio"
 						>
 							<v-list-item-icon><v-icon name="crop_original" /></v-list-item-icon>
 							<v-list-item-content>{{ t('original') }}</v-list-item-content>
@@ -96,7 +96,7 @@
 					{{ n(imageData.width) }}x{{ n(imageData.height) }}
 					<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 						->
-						{{ n(newDimensions.width) }}x{{ n(newDimensions.height) }}
+						{{ n(newDimensions.width ?? 0) }}x{{ n(newDimensions.height ?? 0) }}
 					</template>
 				</div>
 
@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import api from '@/api';
+import api, { addTokenToURL } from '@/api';
 import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -190,7 +190,7 @@ export default defineComponent({
 		});
 
 		const imageURL = computed(() => {
-			return `${getRootPath()}assets/${props.id}?${nanoid()}`;
+			return addTokenToURL(`${getRootPath()}assets/${props.id}?${nanoid()}`);
 		});
 
 		return {
@@ -213,6 +213,7 @@ export default defineComponent({
 			newDimensions,
 			dragMode,
 			cropping,
+			setAspectRatio,
 		};
 
 		function useImage() {
@@ -443,6 +444,12 @@ export default defineComponent({
 				dragMode.value = 'move';
 			}
 		}
+
+		function setAspectRatio() {
+			if (imageData.value) {
+				aspectRatio.value = imageData.value.width / imageData.value.height;
+			}
+		}
 	},
 });
 </script>