add img fallback

This commit is contained in:
pa
2026-03-15 18:04:20 +09:00
parent 0357e81a78
commit cc08f29800
37 changed files with 469 additions and 138 deletions
+20 -7
View File
@@ -92,13 +92,26 @@ export function getColumns({
cell: ({ row }) => {
const ref = row.original;
return (
<img
src={ref.thumbnailImageUrl}
class="avatar-table-thumbnail cursor-pointer rounded-sm object-cover"
style="width: 34px; height: 22px;"
loading="lazy"
onClick={() => onShowAvatarDialog(ref.id)}
/>
<div class="flex items-center">
<img
src={ref.thumbnailImageUrl}
class="avatar-table-thumbnail cursor-pointer rounded-sm object-cover"
style="width: 34px; height: 22px;"
loading="lazy"
onClick={() => onShowAvatarDialog(ref.id)}
onError={(e) => {
e.target.style.display = 'none';
e.target.nextElementSibling.style.display = '';
}}
/>
<div
class="rounded-sm bg-muted flex items-center justify-center cursor-pointer"
style="width: 34px; height: 22px; display: none"
onClick={() => onShowAvatarDialog(ref.id)}
>
<Image class="h-3 w-3 text-muted-foreground" />
</div>
</div>
);
}
},
@@ -9,13 +9,14 @@
:class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
<div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
<img
v-if="avatar.thumbnailImageUrl"
v-if="avatar.thumbnailImageUrl && !imageLoadError"
:src="avatar.thumbnailImageUrl"
:alt="avatar.name"
loading="lazy"
decoding="async"
fetchpriority="low"
class="w-full h-full object-cover block" />
class="w-full h-full object-cover block"
@error="imageLoadError = true" />
<div v-else class="w-full h-full grid place-items-center">
<ImageIcon class="size-6 text-muted-foreground" />
</div>
@@ -252,6 +253,7 @@
const hoverOpen = ref(false);
const contextMenuOpen = ref(false);
const imageLoadError = ref(false);
const handleContextMenuOpen = (open) => {
contextMenuOpen.value = open;