Skip to content
Snippets Groups Projects
Commit 50c7667e authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

fix: use framespec as aspect ratio for image preview

parent c2f21ed8
No related branches found
No related tags found
No related merge requests found
<template> <template>
<ImagePreview <ImagePreview
:url="image?.url ?? null" :url="image?.url ?? null"
class="tw-inline-flex tw-h-64 tw-max-w-full tw-min-w-64 tw-bg-gray-700 tw-rounded tw-flex-1 dark:tw-bg-neutral-700" class="tw-inline-flex tw-h-64 tw-max-w-full tw-min-w-64 tw-w-auto tw-bg-gray-700 tw-rounded tw-flex-1 dark:tw-bg-neutral-700"
:alt="image?.altText" :alt="image?.altText"
:width="image?.width ?? undefined" :width="image?.width ?? undefined"
:height="image?.height ?? undefined" :height="image?.height ?? undefined"
cover cover
:style="{ 'aspect-ratio': aspectRatio }"
v-bind="attrs" v-bind="attrs"
> >
<div <div
...@@ -55,6 +56,10 @@ const showDialog = ref(false) ...@@ -55,6 +56,10 @@ const showDialog = ref(false)
const localImageId = useCopy<number | null>(() => props.modelValue, { const localImageId = useCopy<number | null>(() => props.modelValue, {
save: (value) => emit('update:modelValue', value), save: (value) => emit('update:modelValue', value),
}) })
const aspectRatio = computed(() => {
const [width, height] = props?.frameSpec?.aspectRatio ?? [0, 0]
return height === 0 ? undefined : width / height
})
const image = useImage(computed(() => props.modelValue)) const image = useImage(computed(() => props.modelValue))
</script> </script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment