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

View File

@@ -41,7 +41,12 @@
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(user.id)">
<div class="relative inline-block flex-none size-9 mr-2.5">
<img class="size-full rounded-full object-cover" :src="userImage(user)" loading="lazy" />
<Avatar class="size-9">
<AvatarImage :src="userImage(user)" class="object-cover" />
<AvatarFallback>
<User class="size-4 text-muted-foreground" />
</AvatarFallback>
</Avatar>
</div>
<div class="flex-1 overflow-hidden">
<span
@@ -54,9 +59,10 @@
</template>
<script setup>
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-vue-next';
import { RefreshCw, User } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';