summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/page/page.image.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/components/page/page.image.vue')
-rw-r--r--packages/frontend/src/components/page/page.image.vue28
1 files changed, 28 insertions, 0 deletions
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
new file mode 100644
index 0000000000..8ba70c5855
--- /dev/null
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="lzyxtsnt">
+ <ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, PropType } from 'vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import * as os from '@/os';
+import { ImageBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+const props = defineProps<{
+ block: PropType<ImageBlock>,
+ hpml: PropType<Hpml>,
+}>();
+
+const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
+</script>
+
+<style lang="scss" scoped>
+.lzyxtsnt {
+ > img {
+ max-width: 100%;
+ }
+}
+</style>