Consolidate user avatar Vue logic

Creates 3 vue components:

1. user-avatar-link
2. user-avatar-image
3. user-avatar-svg

and implements them in several places.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/31017

• Port to EE
• Test each implementation manually

EE Compatible Branch: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1699

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.js

@@ -32,11 +32,6 @@ export default {
       default: '',
     },
   },
-  beforeMount() {
-    if (!this.svg && !this.src) {
-      this.src = gon.default_avatar_url;
-    }
-  },
   computed: {
     tooltipClass() {
       return this.tooltipText ? 'has-tooltip' : '';
@@ -50,13 +45,19 @@ export default {
     imgCss() {
       return `avatar ${this.tooltipClass} ${this.avatarSizeClass} ${this.css}`;
     },
+    imgSourceWithFallback() {
+      if (!this.src && !this.svg) {
+        return gon.default_avatar_url;
+      }
+      return this.src;
+    },
   },
   template: `
     <span class="avatar-image-container">
       <img
         v-if="!svg"
         :class="imgCss"
-        :src="src"
+        :src="imgSourceWithFallback"
         :width="size"
         :height="size"
         :alt="alt"