Generate multiple avatar sizes

resources/js/components/Admin/WidgetLatestRegistrations.vue

@@ -6,7 +6,7 @@
                     <td style="width: 300px">
                         <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
                             <DatatableCellImage
-                                    :image="row.data.relationships.settings.data.attributes.avatar"
+                                    :image="row.data.relationships.settings.data.attributes.avatar.sm"
                                     :title="row.data.relationships.settings.data.attributes.name"
                                     :description="row.data.attributes.email"
                             />

resources/js/components/FilesView/MemberAvatar.vue

@@ -3,11 +3,10 @@
 		<img
 			:style="{width: size + 'px', height: size + 'px'}"
 			v-if="member.data.attributes.avatar"
-			:src="member.data.attributes.avatar"
-			:alt="member.data.attributes.name"
+			:src="avatar"
 			:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]"
 			class=""
-		>
+		/>
 		<div
 			v-else
 			class="flex items-center justify-center"
@@ -41,7 +40,6 @@
 				return this.size > 32 ? 'rounded-xl' : 'rounded-lg'
 			},
 			fontSize() {
-
 				if (this.size > 42) {
 					return 'text-lg'
 				} else if (this.size > 32) {
@@ -50,6 +48,15 @@
 					return 'text-sm'
 				}
 			},
+			avatar() {
+				if (this.size > 62) {
+					return this.member.data.attributes.avatar.md
+				} else if (this.size > 32) {
+					return this.member.data.attributes.avatar.sm
+				} else {
+					return this.member.data.attributes.avatar.xs
+				}
+			},
 		}
 	}
 </script>

resources/js/components/Others/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="user-avatar" :class="size">
         <span v-if="isIncompletePayment || isNearlyFullStorageCapacity" class="notification"></span>
-        <img :src="user.data.relationships.settings.data.attributes.avatar" :alt="user.data.relationships.settings.data.attributes.name">
+        <img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
     </div>
 </template>