mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 14:46:04 +02:00
add img fallback
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user