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/boards/components/issue_card_inner.js

 import Vue from 'vue';
+import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link';
 import eventHub from '../eventhub';
 const Store = gl.issueBoards.BoardsStore;
@@ -31,6 +32,9 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       default: false,
     },
   },
+  components: {
+    'user-avatar-link': UserAvatarLink,
+  },
   computed: {
     cardUrl() {
       return `${this.issueLinkBase}/${this.issue.id}`;
@@ -105,20 +109,14 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             {{ issueId }}
           </span>
         </h4>
-        <a
-          class="card-assignee has-tooltip js-no-trigger"
+        <user-avatar-link v-if="assigneeUrl"
+          class="card-assignee js-no-trigger"
           :href="assigneeUrl"
-          :title="assigneeUrlTitle"
-          v-if="issue.assignee"
-          data-container="body"
-        >
-          <img
-            class="avatar avatar-inline s20 js-no-trigger"
-            :src="issue.assignee.avatar"
-            width="20"
-            height="20"
-            :alt="avatarUrlTitle"
-          />
+          :img-alt="avatarUrlTitle"
+          :img-src="issue.assignee.avatar"
+          :img-size="20"
+          :tooltip-text="issue.assignee.name">
+        </user-avatar-link>
         </a>
       </div>
       <div class="card-footer" v-if="showLabelFooter">