From 7c23101ab8c12b735a17deb35637f3f12c00aeb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:17:33 +0200
Subject: [PATCH] fix(editor): Render image binary-data using img tags (#10829)

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
---
 .../src/components/BinaryDataDisplayEmbed.vue   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index fe822821e2..fbb7a68736 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -63,6 +63,7 @@ onMounted(async () => {
 				<source :src="embedSource" :type="binaryData.mimeType" />
 				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
 			</audio>
+			<img v-else-if="binaryData.fileType === 'image'" :src="embedSource" />
 			<VueJsonPretty
 				v-else-if="binaryData.fileType === 'json'"
 				:data="data"
@@ -76,18 +77,16 @@ onMounted(async () => {
 </template>
 
 <style lang="scss">
+img,
+video {
+	max-height: 100%;
+	max-width: 100%;
+}
 .binary-data {
-	background-color: var(--color-foreground-xlight);
-
-	&.image {
-		max-height: calc(100% - 1em);
-		max-width: calc(100% - 1em);
-	}
-
 	&.other,
 	&.pdf {
-		height: calc(100% - 1em);
-		width: calc(100% - 1em);
+		height: 100%;
+		width: 100%;
 	}
 }
 </style>