Fun/SearcjGal-frontend
1
0
Fork 0
mirror of https://github.com/Moe-Sakura/frontend.git synced 2026-05-14 21:17:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor image loading and placeholder logic in VndbPanel.vue

Browse Source 
- Updated the structure for image loading to improve clarity and maintainability.
- Introduced a template for conditional rendering of images and skeleton loading.
- Enhanced the placeholder display for characters without images for better user experience.
This commit is contained in:
AdingApkgg
2025-12-26 19:12:01 +08:00
parent eb1950fa4c
commit 228390194e
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/VndbPanel.vue
View File

@@ -391,16 +391,20 @@
>
<!-- 图片区域 -->
<div class="w-full relative">
<!-- 骨架屏占位 (padding-bottom: 133.33% = 3:4 比例) -->
<div class="w-full pb-[133.33%] skeleton bg-rose-100 dark:bg-rose-900/30" />
<img
v-if="char.image"
:src="char.image"
:alt="char.name"
class="absolute inset-0 w-full h-full object-cover"
loading="lazy"
@load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
/>
<!-- 占位 (padding-bottom: 133.33% = 3:4 比例) -->
<div class="w-full pb-[133.33%]" />
<!-- 有图片时：骨架屏 + 图片 -->
<template v-if="char.image">
<div class="absolute inset-0 skeleton bg-rose-100 dark:bg-rose-900/30" />
<img
:src="char.image"
:alt="char.name"
class="absolute inset-0 w-full h-full object-cover"
loading="lazy"
@load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
/>
</template>
<!-- 无图片时：占位符 -->
<div v-else class="absolute inset-0 flex items-center justify-center bg-rose-50 dark:bg-rose-900/30">
<Users :size="24" class="text-rose-400 dark:text-rose-600" />
</div>