Merge branch '296-image_component' of github.com:Human-Connection/Human-Connection into 296-image_component

webapp/components/Badges.vue

@@ -10,17 +10,21 @@
       :key="badge.key"
       class="hc-badge-container"
     >
-      <img
+      <hc-image
         :title="badge.key"
-        :src="badge.icon"
+        :image-props="{ src: badge.icon}"
         class="hc-badge"
-      >
+      />
     </div>
   </div>
 </template>
 
 <script>
+import HcImage from './Image'
 export default {
+  components: {
+    HcImage
+  },
   props: {
     badges: {
       type: Array,

webapp/components/Empty.vue

@@ -5,13 +5,13 @@
     :margin="margin"
   >
     <ds-text>
-      <img
-        :src="iconPath"
+      <hc-image
+        :image-props="{ src: `/img/empty/${this.icon}.svg` }"
         width="80"
         class="hc-empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
-      ><br>
+      /><br>
       <ds-text
         v-show="message"
         class="hc-empty-message"
@@ -24,8 +24,12 @@
 </template>
 
 <script>
+import HcImage from '~/components/Image'
 export default {
   name: 'HcEmpty',
+  components: {
+    HcImage
+  },
   props: {
     /**
      * Icon that should be shown
@@ -52,11 +56,6 @@ export default {
       type: [String, Object],
       default: 'x-large'
     }
-  },
-  computed: {
-    iconPath() {
-      return `/img/empty/${this.icon}.svg`
-    }
   }
 }
 </script>

webapp/components/Image/index.vue

@@ -15,8 +15,8 @@ export default {
   },
   computed: {
     imageSrc() {
-      // TODO implement
-      return 'this should be an image source attribute'
+      const src = this.imageProps.src
+      return src.startsWith('/') ? src.replace('/', '/api/') : src
     }
   }
 }

webapp/pages/login.vue

@@ -30,11 +30,11 @@
               margin-bottom="xxx-small"
               centered
             >
-              <img
+              <hc-image
                 class="login-image"
-                src="/img/sign-up/humanconnection.svg"
                 alt="Human Connection"
-              >
+                :image-props="{ src: '/img/sign-up/humanconnection.svg' }" 
+              />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item
@@ -96,12 +96,14 @@
 
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch'
+import HcImage from '~/components/Image'
 
 import gql from 'graphql-tag'
 
 export default {
   components: {
-    LocaleSwitch
+    LocaleSwitch,
+    HcImage
   },
   layout: 'blank',
   data() {

webapp/pages/logout.vue

@@ -11,11 +11,11 @@
           margin-bottom="xxx-small"
           centered
         >
-          <img
+          <hc-image
             style="width: 200px;"
-            src="/img/sign-up/onourjourney.png"
+            :image-props="imageProps"
             alt="Human Connection"
-          >
+          />
         </ds-space>
         <ds-space
           style="text-align: center;"
@@ -36,8 +36,17 @@
 </template>
 
 <script>
+import HcImage from '~/components/Image'
 export default {
+  components: {
+    HcImage
+  },
   layout: 'blank',
+  computed: {
+    imageProps() {
+      return { src: '/img/sign-up/onourjourney.png' }
+    }
+  },
   async beforeCreate() {
     await this.$store.dispatch('auth/logout')
     this.$router.replace('/')

webapp/pages/settings/my-social-media.vue

@@ -14,12 +14,12 @@
             :href="link.url"
             target="_blank"
           >
-            <img
-              :src="link.favicon"
+            <hc-image
+              :image-props="{ src: link.favicon }"
               alt="Social Media link"
               width="16"
               height="16"
-            >
+            />
             {{ link.url }}
           </a>
           &nbsp;&nbsp; <span class="layout-leave-active">|</span> &nbsp;&nbsp;
@@ -61,8 +61,12 @@
 <script>
 import gql from 'graphql-tag'
 import { mapGetters, mapMutations } from 'vuex'
+import HcImage from '~/components/Image'
 
 export default {
+  components: {
+    HcImage
+  },
   data() {
     return {
       value: ''