Display: Adjust avatar styles and set default image URL #5652

Author: AngelFQC

assets/css/scss/atoms/_avatar.scss

@@ -50,7 +50,7 @@
 }
 
 .avatar-list {
-  @apply flex flex-row flex-wrap gap-4;
+  @apply flex flex-row flex-wrap gap-2;
 
   .avatar-container {
     @apply flex flex-row gap-2;

assets/vue/components/basecomponents/BaseUserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <Avatar
     :aria-label="alt"
-    :image="`${imageUrl}?w=${imageSize}&h=${imageSize}&fit=crop`"
+    :image="finalImageUrl"
     :shape="shape"
     :size="'normal' !== size ? size : undefined"
   />
@@ -37,7 +37,7 @@ const props = defineProps({
 })
 
 const imageSize = computed(() => {
-  // these numbers are approximate, they were calculated with a size
+  // these numbers are approximate; they were calculated with a size
   // allowing to see the image clearly
   if (props.size === "xlarge") {
     return 112
@@ -49,4 +49,12 @@ const imageSize = computed(() => {
 
   return 32
 })
+
+const finalImageUrl = computed(() => {
+  if (!props.imageUrl) {
+    return `/img/icons/${imageSize.value}/unknown.png`
+  }
+
+  return `${props.imageUrl}?w=${imageSize.value}&h=${imageSize.value}&fit=crop`
+})
 </script>