fix assets w/h

Author: zernonia

src/blocks/helpers/asset.vue

@@ -4,17 +4,24 @@ import { computed, StyleValue } from "vue"
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
-const { type, properties, f } = useNotionBlock(props)
+const { properties, f } = useNotionBlock(props)
 
 const src = computed(() => {
-  return type.value === "figma" ? properties.value?.source[0][0] : f.value.display_source
+  return f.value.display_source ?? properties.value?.source?.[0]
 })
 
-const style = computed(() => {
-  const aspectRatio = f.value.block_aspect_ratio || f.value.block_height / f.value.block_width
+const aspectRatioStyle = computed(() => {
+  let aspectRatio =
+    f.value.block_width == 1 || f.value.block_height == 1
+      ? 1 / f.value.block_aspect_ratio
+      : `${f.value.block_width} / ${f.value.block_height} `
+
   return {
-    paddingBottom: `${aspectRatio * 100}%`,
+    width: f.value.block_width == 1 ? "100%" : `${f.value.block_width}px`,
+    height: f.value.block_height == 1 ? `100%` : `${f.value.block_height}px`,
+    maxWidth: "100%",
     position: "relative",
+    aspectRatio,
   } as StyleValue
 })
 </script>
@@ -26,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div :style="style" v-if="src">
-    <iframe class="notion-image-inset" style="width: 100%" :src="src" :allow="props.embedAllow" />
+  <div :style="aspectRatioStyle" v-if="src">
+    <iframe style="width: 100%; height: 100%" :src="src" :allow="props.embedAllow" />
   </div>
 </template>