Merge pull request #693 from Human-Connection/689-fix_broken_image_urls_after_upload

689 fix broken image urls after upload

webapp/components/Avatar/Avatar.spec.js

@@ -0,0 +1,69 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
+import Avatar from './Avatar.vue'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+describe('Avatar.vue', () => {
+  let propsData = {}
+
+  const Wrapper = () => {
+    return mount(Avatar, { propsData, localVue })
+  }
+
+  it('renders no image', () => {
+    expect(
+      Wrapper()
+        .find('img')
+        .exists(),
+    ).toBe(false)
+  })
+
+  it('renders an icon', () => {
+    expect(
+      Wrapper()
+        .find('.ds-icon')
+        .exists(),
+    ).toBe(true)
+  })
+
+  describe('given a user', () => {
+    describe('with a relative avatar url', () => {
+      beforeEach(() => {
+        propsData = {
+          user: {
+            avatar: '/avatar.jpg',
+          },
+        }
+      })
+
+      it('adds a prefix to load the image from the uploads service', () => {
+        expect(
+          Wrapper()
+            .find('img')
+            .attributes('src'),
+        ).toBe('/api/avatar.jpg')
+      })
+    })
+
+    describe('with an absolute avatar url', () => {
+      beforeEach(() => {
+        propsData = {
+          user: {
+            avatar: 'http://lorempixel.com/640/480/animals',
+          },
+        }
+      })
+
+      it('keeps the avatar URL as is', () => {
+        // e.g. our seeds have absolute image URLs
+        expect(
+          Wrapper()
+            .find('img')
+            .attributes('src'),
+        ).toBe('http://lorempixel.com/640/480/animals')
+      })
+    })
+  })
+})

webapp/components/Avatar/Avatar.vue

@@ -0,0 +1,33 @@
+<template>
+  <ds-avatar
+    :image="avatarUrl"
+    :name="userName"
+    class="avatar"
+    :size="size"
+  />
+</template>
+
+<script>
+export default {
+  name: 'HcAvatar',
+  props: {
+    user: { type: Object, default: null },
+    size: { type: String, default: 'small' },
+  },
+  computed: {
+    avatarUrl() {
+      const { avatar: imageSrc } = this.user || {}
+      if (!imageSrc) return imageSrc
+      return imageSrc.startsWith('/') ? imageSrc.replace('/', '/api/') : imageSrc
+    },
+    userName() {
+      const { name } = this.user || {}
+      // The name is used to display the initials in case
+      // the image cannot be loaded.
+      return name
+      // If the name is undefined, then our styleguide will
+      // display an icon for the anonymous user.
+    },
+  },
+}
+</script>

webapp/components/User/index.vue

@@ -3,10 +3,7 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar
-        style="display: inline-block; vertical-align: middle;"
-        size="small"
-      />
+      <hc-avatar />
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
       <b
@@ -36,11 +33,8 @@
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
-            <ds-avatar
-              :image="user.avatar"
-              :name="userName"
-              style="display: inline-block; vertical-align: middle;"
-              size="small"
+            <hc-avatar
+              :user="user"
             />
           </div>
           <div style="display: inline-block; height: 100%; vertical-align: middle;">
@@ -143,6 +137,7 @@ import { mapGetters } from 'vuex'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton'
 import HcBadges from '~/components/Badges'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
 import Dropdown from '~/components/Dropdown'
 
 export default {
@@ -150,6 +145,7 @@ export default {
   components: {
     HcRelativeDateTime,
     HcFollowButton,
+    HcAvatar,
     HcBadges,
     Dropdown,
   },
@@ -183,12 +179,6 @@ export default {
 </script>
 
 <style lang="scss">
-.profile-avatar {
-  display: block;
-  margin: auto;
-  margin-top: -45px;
-  border: #fff 5px solid;
-}
 .user {
   white-space: nowrap;
   position: relative;

webapp/layouts/default.vue

@@ -45,10 +45,8 @@
                     :href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
                     @click.prevent="toggleMenu"
                   >
-                    <ds-avatar
-                      :image="user.avatar"
-                      :name="user.name"
-                      size="small"
+                    <hc-avatar
+                      :user="user"
                     />
                     <ds-icon
                       size="xx-small"
@@ -123,6 +121,7 @@ import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
 
 export default {
@@ -132,6 +131,7 @@ export default {
     SearchInput,
     Modal,
     NotificationMenu,
+    HcAvatar,
   },
   mixins: [seo],
   data() {

webapp/pages/profile/_id/_slug.vue

@@ -18,10 +18,9 @@
             v-if="myProfile"
             :user="user"
           />
-          <ds-avatar
+          <hc-avatar
             v-else
-            :image="user.avatar"
-            :name="userName"
+            :user="user"
             class="profile-avatar"
             size="x-large"
           />
@@ -333,6 +332,7 @@ import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
 import HcUpload from '~/components/Upload'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
 
 export default {
   components: {
@@ -343,6 +343,7 @@ export default {
     HcBadges,
     HcLoadMore,
     HcEmpty,
+    HcAvatar,
     ContentMenu,
     HcUpload,
   },
@@ -456,7 +457,7 @@ export default {
 </script>
 
 <style lang="scss">
-.profile-avatar {
+.profile-avatar.ds-avatar {
   display: block;
   margin: auto;
   margin-top: -60px;