5b8682bb7c
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96 卸载路由时清除requestAnimationFrame * feat: ✨ 文件存储使用Blob格式 * style: 💄 修改部分类型any为具体类型 * feat: ✨ 界面设置中模块使用瀑布流布局 #96 * fix: 🐛 md文档更换文件夹解决控制台警告 * style: 💄 switch按钮改回使用daisyui组件 * refactor: ♻️ 所有人员列表提取tableColumn * style: 💄 奖项列表中的图片类型修复
43 lines
930 B
Vue
43 lines
930 B
Vue
<script setup lang='ts'>
|
|
import type { IFileData } from '../FileUpload/type'
|
|
import type { IImage } from '@/types/storeType'
|
|
import localforage from 'localforage'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
interface IProps {
|
|
imgItem: IImage
|
|
}
|
|
const props = defineProps<IProps>()
|
|
const imageDbStore = localforage.createInstance({
|
|
name: 'imgStore',
|
|
})
|
|
|
|
const imgUrl = ref('')
|
|
|
|
async function getImageStoreItem(item: IImage): Promise<string> {
|
|
let image = ''
|
|
if (item.url === 'Storage') {
|
|
const key = item.id
|
|
const imageData = await imageDbStore.getItem<IFileData>(key)
|
|
image = URL.createObjectURL(imageData?.data as Blob)
|
|
}
|
|
else {
|
|
image = item.url as string
|
|
}
|
|
|
|
return image
|
|
}
|
|
|
|
onMounted(async () => {
|
|
imgUrl.value = await getImageStoreItem(props.imgItem)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<img :src="imgUrl" alt="Image" class="object-cover h-full rounded-xl">
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|