User avatar as a component.

src/webview/src/components/IssuableDetails.vue

 <script>
+import UserAvatar from './UserAvatar';
 const moment = require('moment');
 const md = require('markdown-it')().use(require('markdown-it-checkbox'));
 
@@ -9,6 +10,9 @@ export default {
       required: true,
     },
   },
+  components: {
+    UserAvatar,
+  },
   computed: {
     stateText() {
       const states = {
@@ -19,11 +23,8 @@ export default {
       return states[this.issuable.state] || '';
     },
     description() {
-      // This could a nice Regex but :(
-      const normalized = this.issuable.description.replace(
-        /\/uploads/gm,
-        `${this.issuable.web_url.split('/issues/')[0]}/uploads/`
-      );
+      const path = `${this.issuable.web_url.split('/issues/')[0]}/uploads/`;
+      const normalized = this.issuable.description.replace(/\/uploads/gm, path);
 
       return md.render(normalized);
     },
@@ -50,21 +51,8 @@ export default {
         {{ createdAgo }}
       </span>
       by
-      <img
-        :src="issuable.author.avatar_url"
-        class="avatar"
-      />
-      <span class="author">
-        <a
-          :href="issuable.author.web_url"
-          target="_blank"
-        >
-          {{ issuable.author.name }}
-        </a>
-      </span>
-      <a
-        :href="issuable.web_url"
-      >
+      <user-avatar :issuable="issuable" />
+      <a :href="issuable.web_url">
         View in GitLab
       </a>
     </div>
@@ -79,11 +67,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 24px;
-}
 .capitalize {
   text-transform: capitalize;
 }

src/webview/src/components/UserAvatar.vue

+<script>
+export default {
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <img
+      :src="issuable.author.avatar_url"
+      class="avatar"
+    />
+    <span class="author">
+      <a
+        :href="issuable.author.web_url"
+        target="_blank"
+      >
+        {{ issuable.author.name }}
+      </a>
+    </span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+</style>