From be1d02a7f8acc751c88894e0c9d4ed0bc4080b85 Mon Sep 17 00:00:00 2001 From: Johann150 <johann.galle@protonmail.com> Date: Thu, 19 May 2022 13:41:47 +0200 Subject: [PATCH] enhance: page image component with alt text (#8634) * refactor to composition API * use existing image component This improves user experience because alt text is displayed correctly. * fix: correct image src * fix: defineProps * fix --- .../client/src/components/page/page.image.vue | 28 ++++++------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue index 04ce74bd7c..6e38a9f424 100644 --- a/packages/client/src/components/page/page.image.vue +++ b/packages/client/src/components/page/page.image.vue @@ -1,34 +1,22 @@ <template> <div class="lzyxtsnt"> - <img v-if="image" :src="image.url"/> + <ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/> </div> </template> -<script lang="ts"> +<script lang="ts" setup> import { defineComponent, PropType } from 'vue'; +import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; import * as os from '@/os'; import { ImageBlock } from '@/scripts/hpml/block'; import { Hpml } from '@/scripts/hpml/evaluator'; -export default defineComponent({ - props: { - block: { - type: Object as PropType<ImageBlock>, - required: true - }, - hpml: { - type: Object as PropType<Hpml>, - required: true - } - }, - setup(props, ctx) { - const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId); +const props = defineProps<{ + block: PropType<ImageBlock>, + hpml: PropType<Hpml>, +}>(); - return { - image - }; - } -}); +const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId); </script> <style lang="scss" scoped>