fix(editor): Render image binary-data using img tags (#10829)

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2024-09-16 15:17:33 +02:00 committed by GitHub
parent 25c8a328a8
commit 7c23101ab8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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