[change] User IconがNullの場合の表示を記述

components/Footer.vue

@@ -3,7 +3,7 @@
     <div class="flex justify-center">
       <a class="mx-8" href="https://compositecomputer.club" target="_blank">
         <img
-          src="../assets/image/C3logo.png"
+          src="../assets/images/C3logo.png"
           class="hover:opacity-50 transition h-10"
           alt="C3 logo"
         />

components/Header.vue

@@ -22,7 +22,7 @@
       />
       <nuxt-link to="/" class="hover:opacity-50 h-full">
         <img
-          src="@/assets/image/ToyBoxlogo.png"
+          src="@/assets/images/ToyBoxlogo.png"
           class="h-full"
           alt="ToyBox logo"
         />
@@ -84,9 +84,12 @@
           />
         </div>
         <!-- logged in -->
-        <button class="hover:opacity-60 transition" @click="activeNav = true">
-          <img
-            v-if="nowLogin"
+        <button
+          v-if="nowLogin"
+          class="hover:opacity-60 transition"
+          @click="activeNav = true"
+        >
+          <!-- <img
             :src="getIcon"
             class="
               rounded-full
@@ -98,7 +101,8 @@
               bg-white
             "
             alt="user icon"
-          />
+          /> -->
+          <user-rounded-icon :image-src="getIcon" size="large" />
         </button>
       </div>
       <!-- navigation -->
@@ -120,10 +124,15 @@
         "
       >
         <!-- icon -->
-        <img
+        <!-- <img
           :src="getIcon"
           class="rounded-full w-16 h-16 mx-auto my-1 pointer-events-none"
           alt="user icon"
+        /> -->
+        <user-rounded-icon
+          :image-src="getIcon"
+          size="xx-large"
+          class="mx-auto my-3"
         />
         <!-- name -->
         <div class="text-gray-200 mb-6">
@@ -262,11 +271,14 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import BaseTextButton from '@/components/commons/BaseTextButton.vue'
+import UserRoundedIcon from '@/components/commons/UserRoundedIcon.vue'
+
 import { authStore, workFilterStore } from '@/store'
 
 @Component({
   components: {
-    BaseTextButton
+    BaseTextButton,
+    UserRoundedIcon
   }
 })
 export default class Header extends Vue {
@@ -278,7 +290,11 @@ export default class Header extends Vue {
   }
 
   get getIcon() {
-    return authStore.getUser.avatar_url
+    if (authStore.getUser.avatar_url) {
+      return authStore.getUser.avatar_url
+    } else {
+      return ''
+    }
   }
 
   get getDisplayName() {

components/comments/CommentUser.vue

@@ -7,7 +7,7 @@
       :to="`/users/${user.id}`"
       :class="{ 'pointer-events-auto': user.id !== '0' }"
     >
-      <user-rounded-icon :imageSrc="user.avatar_url" />
+      <user-rounded-icon :image-src="user.avatar_url" />
     </nuxt-link>
     <nuxt-link
       :to="`/users/${user.id}`"

components/comments/CommentsField.vue

@@ -68,7 +68,7 @@ export default class CommentsField extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }

components/comments/CommentsListItem.vue

@@ -147,7 +147,7 @@ export default class CommentsListItem extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }

components/comments/ReplyCommentsListItem.vue

@@ -41,7 +41,7 @@ export default class ReplyCommentsListItem extends Vue {
     id: '0',
     name: 'ゲスト',
     display_name: 'ゲスト',
-    avatar_url: require('@/assets/image/gest-user.svg'),
+    avatar_url: require('@/assets/images/guest-user.svg'),
     created_at: '',
     updated_at: ''
   }

components/commons/UserRoundedIcon.vue

@@ -4,14 +4,37 @@
     :class="[
       { 'w-6 h-6': size === 'small' },
       { 'w-8 h-8': size === 'base' },
-      { 'w-32 h-32': size === 'large' }
+      { 'w-11 h-11': size === 'large' },
+      { 'w-14 h-14': size === 'x-large' },
+      { 'w-16 h-16': size === 'xx-large' },
+      { ' bg-slate-500': !imageSrc }
     ]"
   >
     <img
+      v-if="imageSrc"
       :src="imageSrc"
       alt="user icon"
       class="absolute h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
     />
+    <svg
+      v-else
+      class="
+        absolute
+        h-full
+        top-1/2
+        left-1/2
+        -translate-x-1/2 -translate-y-1/2
+        fill-slate-100
+      "
+      xmlns="http://www.w3.org/2000/svg"
+      height="48"
+      viewBox="0 96 960 960"
+      width="48"
+    >
+      <path
+        d="M480 575q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160 896v-94q0-38 19-65t49-41q67-30 128.5-45T480 636q62 0 123 15.5T731 696q31 14 50 41t19 65v94H160Z"
+      />
+    </svg>
   </div>
 </template>
 
@@ -24,6 +47,6 @@ export default class UserRoundedIcon extends Vue {
   imageSrc!: string
 
   @Prop({ type: String, required: false, default: 'base' })
-  size!: 'small' | 'base' | 'large'
+  size!: 'small' | 'base' | 'large' | 'x-large' | 'xx-large'
 }
 </script>

components/commons/UserTag.vue

@@ -11,7 +11,7 @@
     ]"
   >
     <user-rounded-icon
-      :imageSrc="user.avatar_url"
+      :image-src="user.avatar_url ? user.avatar_url : ''"
       :size="invisibleName || size === 'small' ? 'small' : 'base'"
     />
     <div

components/users/UsersProfile.vue

@@ -31,7 +31,7 @@
     />
     <div class="bg-gray-300 w-full h-64 z-0 relative overflow-hidden mb-10">
       <img
-        src="@/assets/image/bg-gray.png"
+        src="@/assets/images/bg-gray.png"
         alt="user banner image"
         class="
           absolute
@@ -43,7 +43,7 @@
       />
     </div>
     <div class="z-10 absolute left-1/2 -translate-x-1/2 top-36">
-      <user-rounded-icon :imageSrc="user.avatar_url" :size="'large'" />
+      <user-rounded-icon :image-src="user.avatar_url" :size="'large'" />
     </div>
     <div class="text-3xl m-3 font-bold">
       {{ user.display_name }}