Organize upload images in folders

resources/js/components/UserInfo.vue

@@ -23,7 +23,7 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 <template>
     <div class="flex items-center gap-2">
         <Avatar class="size-8 overflow-hidden rounded-lg">
-            <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
+            <AvatarImage v-if="showAvatar" :src="'storage/uploads/users/' + user.avatar!" :alt="user.name" />
             <AvatarFallback class="rounded-full bg-primary text-black dark:text-white">
                 {{ getInitials(user.name) }}
             </AvatarFallback>

resources/js/pages/Customers.vue

@@ -184,8 +184,8 @@ const call = (number: string, event: Event) => {
                 @click="editCustomer(customer)">
 
                 <CardHeader v-if="customer.logo" class="z-0">
-                    <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
-                        class="max-h-8 max-w-[50%]">
+                    <img :src="'storage/uploads/customers/' + customer.logo" alt="Logo {{ customer.companyName }}"
+                        class="max-h-8 max-w-[50%]" loading="lazy">
                 </CardHeader>
 
                 <CardContent class="flex justify-between gap-8 flex-col sm:flex-row pr-4 z-0">
@@ -246,8 +246,8 @@ const call = (number: string, event: Event) => {
                         <Tooltip v-for="contact in customer.contacts">
                             <TooltipTrigger>
                                 <Avatar class="size-14 border-2 border-background -mr-2">
-                                    <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/' + contact.avatar"
-                                        loading="lazy" />
+                                    <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/contacts/' + contact.avatar"
+                                        loading="lazy" class="object-cover" />
                                     <AvatarFallback
                                         :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
                                         {{ getInitials(contact.firstName + ' ' + contact.lastName) }}