fix: hide broken scene thumbnail images with @error handler

- Scene thumbnails may not exist for all files
- Added @error handler to hide broken images instead of showing 404
- Cleaner UI when scene data is incomplete
This commit is contained in:
2026-10-27 03:21:39 +08:00
parent 712b5a6527
commit 49e23c39f3

View File

@@ -126,9 +126,9 @@
<span class="card-file-name">{{ r.file_name || 'Unknown' }}</span> <span class="card-file-name">{{ r.file_name || 'Unknown' }}</span>
<span class="card-file-uuid-badge">{{ r.file_uuid }}</span> <span class="card-file-uuid-badge">{{ r.file_uuid }}</span>
</div> </div>
<div class="card-thumb" @click="playVideo(r)"> <div class="card-thumb" @click="playVideo(r)">
<img v-if="r.thumbnail_url" :src="r.thumbnail_url" alt="" loading="lazy"> <img v-if="r.thumbnail_url" :src="r.thumbnail_url" alt="" loading="lazy" @error="$event.target.style.display='none'">
<img v-else-if="thumbs[r.file_uuid + ':' + r.start_frame]" :src="thumbs[r.file_uuid + ':' + r.start_frame]" alt="" loading="lazy"> <img v-else-if="thumbs[r.file_uuid + ':' + r.start_frame]" :src="thumbs[r.file_uuid + ':' + r.start_frame]" alt="" loading="lazy">
<div v-else class="thumb-placeholder" v-observe="() => loadThumb(r.file_uuid, r.start_frame || 0)"> <div v-else class="thumb-placeholder" v-observe="() => loadThumb(r.file_uuid, r.start_frame || 0)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
</div> </div>