minor changes to avatar

frontend/src/components/Avatar.vue

 <template>
   <div :style="style" aria-hidden="true">
     <!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
-    <img v-if="this.isImage" style="display: none" :src="this.src"/>
+    <img v-if="this.isImage" style="display: none" :src="'avatar/'+this.pathToImage"/>
     <span v-show="!this.isImage">{{ userInitial }}</span>
   </div>
 </template>
@@ -35,10 +35,10 @@ export default {
       type: Boolean
     },
     size: {
-      type: Number,
+      type: [Number, String],
       default: 50
     },
-    src: {
+    pathToImage: {
       type: String
     },
     rounded: {
@@ -80,7 +80,7 @@ export default {
       }
     },
     isImage () {
-      return !this.imgError && Boolean(this.src)
+      return Boolean(this.pathToImage)
     },
 
     style () {
@@ -96,11 +96,9 @@ export default {
         textAlign: 'center',
         userSelect: 'none'
       }
-
       const imgBackgroundAndFontStyle = {
-        background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`
+        background: `transparent url('avatar/${this.pathToImage}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`
       }
-
       const initialBackgroundAndFontStyle = {
         backgroundColor: this.background,
         font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
@@ -126,43 +124,7 @@ export default {
   },
 
   methods: {
-    initial: getInitials,
-
-    onImgError () {
-      this.imgError = true
-    },
-
-    randomBackgroundColor (seed, colors) {
-      return colors[seed % (colors.length)]
-    },
-
-    lightenColor (hex, amt) {
-      // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
-      var usePound = false
-
-      if (hex[0] === '#') {
-        hex = hex.slice(1)
-        usePound = true
-      }
-
-      var num = parseInt(hex, 16)
-      var r = (num >> 16) + amt
-
-      if (r > 255) r = 255
-      else if (r < 0) r = 0
-
-      var b = ((num >> 8) & 0x00FF) + amt
-
-      if (b > 255) b = 255
-      else if (b < 0) b = 0
-
-      var g = (num & 0x0000FF) + amt
-
-      if (g > 255) g = 255
-      else if (g < 0) g = 0
-
-      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
-    }
+    initial: getInitials
   }
 }
 </script>

frontend/src/components/UserRibbon.vue

 <template>
   <div class="vue-user-ribon--wrap" aria-hidden="true">
     <p>Vous êtres connecté <strong>{{username}}</strong>.</p>
-    <avatar :username="this.username" :src="this.pathToImage"/>
+    <avatar :username="this.username" :pathToImage="this.pathToImage"/>
     <button class="logout-button" v-on:click="logout">
       <img src="icons/logout.svg" height="40"/>
     </button>